レンジスライダー

レンジスライダーのレイアウト

シングルレンジ

シングルレンジスライダーのレイアウトは非常にシンプルです

<!-- Range Slider element -->
<div class="range-slider">
  <!-- range input -->
  <input type="range" min="0" max="100" step="1" value="10" />
</div>

デュアルレンジ

デュアルレンジスライダーは、input:rangeがデュアルレンジをサポートしていないため、input要素を必要としないため、よりシンプルです

<!-- Range Slider element -->
<div class="range-slider"></div>

レンジスライダーの色

レンジスライダーは、すべてのデフォルトの色をサポートしています。色を変更するには、rangeスライダー要素にcolor-[color]クラスを追加するだけです。

<!-- red range -->
<div class="range-slider color-red">...</div>

<!-- orange range -->
<div class="range-slider color-orange">...</div>

レンジスライダーのアプリメソッド

レンジスライダーを操作するための関連するアプリメソッドを見てみましょう

app.range.create(parameters)- レンジスライダーインスタンスを作成します

parameters - object。レンジスライダーのパラメータを持つオブジェクト

メソッドは、作成されたレンジスライダーのインスタンスを返します

app.range.destroy(el)- レンジスライダーインスタンスを破棄します

el - HTMLElement または string (CSSセレクター付き) または object。破棄するレンジスライダー要素またはレンジスライダーインスタンス。

app.range.get(el)- HTML要素でレンジスライダーインスタンスを取得します

el - HTMLElement または string (CSSセレクター付き)。レンジスライダー要素。

メソッドは、レンジスライダーのインスタンスを返します

app.range.getValue(el)- レンジスライダーの値を取得します

el - HTMLElement または string (CSSセレクター付き)。レンジスライダー要素。

メソッドは、レンジスライダーの値を返します

app.range.setValue(el, value)- 新しいレンジスライダーの値を設定します

el - HTMLElement または string (CSSセレクター付き)。レンジスライダー要素。
value - number (シングルレンジの場合) または値の配列 (デュアルレンジの場合)

メソッドは、レンジスライダーのインスタンスを返します

レンジスライダーのパラメータ

次に、レンジスライダーを作成するために必要な利用可能なパラメータのリストを見てみましょう

パラメータ	型	デフォルト	説明
el	HTMLElement string		レンジスライダー要素。HTMLElementまたはレンジスライダー要素のCSSセレクターを持つ文字列
inputEl	HTMLElement string		レンジスライダーのinput要素またはinput要素のCSSセレクター。指定されていない場合は、レンジスライダー要素内の`input type="range"`を探します
dual	boolean	false	デュアルレンジスライダーを有効にします
step	number	1	値の間の最小ステップ
label	boolean	false	レンジスライダーのつまみの周りに追加のラベルを有効にします
formatLabel	function(value)		メソッドは、フォーマットされたレンジつまみラベルのテキストを返す必要があります。引数として、ラベルの値を受け取ります
min	number		最小値
max	number		最大値
value	number array		初期値。シングルレンジの場合は数値、デュアルレンジの場合は値の配列
draggableBar	boolean	true	有効にすると、レンジバーのクリックやスワイプでレンジスライダーを操作（値を変更）することもできます。
vertical	boolean	false	垂直レンジスライダーを有効にします
verticalReversed	boolean	false	垂直レンジスライダーを反転させます（`vertical`も有効にする必要があります）
scale	boolean	false	レンジスライダーのスケールを有効にします
scaleSteps	number	5	スケールステップ数
scaleSubSteps	number	0	スケールサブステップ数（各ステップはこの値で分割されます）
formatScaleLabel	function (value)		メソッドは、フォーマットされたスケール値を返す必要があります。引数として、現在のスケールステップ値を受け取ります。このメソッドは、各スケールステップに対して呼び出されます。
limitKnobPosition	boolean		つまみの位置をレンジバーのサイズに制限します。デフォルトではiOSテーマから有効になっています
on	object		イベントハンドラーを持つオブジェクト。例えば `var range = app.range.create({ el: '.range-slider', on: { change: function () { console.log('Range Slider value changed') } } })`

レンジスライダーのメソッドとプロパティ

レンジスライダーを作成するには、次を呼び出す必要があります

var range = app.range.create({ /* parameters */ })

その後、便利なメソッドとプロパティを持つ初期化されたインスタンス（上記の例のrange変数など）があります

プロパティ
range.app	グローバルアプリインスタンスへのリンク
range.el	レンジスライダーのHTML要素
range.$el	レンジスライダーのHTML要素を持つDom7インスタンス
range.inputEl	レンジスライダーのinput HTML要素
range.$inputEl	レンジスライダーのinput HTML要素を持つDom7インスタンス
range.rangeWidth	レンジスライダーの幅（px単位）
range.dual	デュアルかどうかを示すブール値プロパティ
range.min	レンジの最小値
range.max	レンジの最大値
range.value	レンジの値
range.scale	`scale`が有効かどうかを示すブール値プロパティ
range.scaleSteps	スケールステップ数
range.scaleSubSteps	スケールサブステップ数
range.$scaleEl	生成されたスケールHTML要素を持つDom7インスタンス
range.knobs	各要素が作成されたレンジつまみ（デュアルスライダーの場合は2つのつまみ）のHTMLElementを表す配列
range.labels	各要素が作成されたレンジつまみラベル（デュアルスライダーの場合は2つのラベル）のHTMLElementを表す配列
range.vertical	垂直かどうかを示すブール値プロパティ
range.verticalReversed	垂直で反転しているかどうかを示すブール値プロパティ
range.params	レンジスライダーのパラメータ
メソッド
range.getValue()	レンジスライダーの値を返します
range.setValue(value)	新しいレンジスライダーの値を設定します
range.updateScale()	スライダースケールを再計算して再レンダリングします
range.destroy()	レンジスライダーのインスタンスを破棄します
range.on(event, handler)	イベントハンドラーを追加します
range.once(event, handler)	発生後に削除されるイベントハンドラーを追加します
range.off(event, handler)	イベントハンドラーを削除します
range.off(event)	指定されたイベントのすべてのハンドラーを削除します
range.emit(event, ...args)	インスタンスでイベントを発火します

レンジスライダーのイベント

レンジスライダーは、レンジ要素で次のDOMイベントを発火し、アプリとレンジインスタンスでイベントを発火します

DOMイベント

イベント	ターゲット	説明
range:change	レンジスライダー要素<div class="range-slider">	レンジスライダーの値が変更されたときにイベントがトリガーされます
range:changed	レンジスライダー要素<div class="range-slider">	値の変更後、スライダーのつまみがリリースされたときにイベントがトリガーされます
range:beforedestroy	レンジスライダー要素<div class="range-slider">	レンジスライダーのインスタンスが破棄される直前にイベントがトリガーされます

アプリとレンジスライダーインスタンスのイベント

レンジスライダーインスタンスは、自身のインスタンスとアプリインスタンスの両方でイベントを発行します。アプリインスタンスのイベントには、rangeが接頭辞として付いた同じ名前があります。

イベント	引数	ターゲット	説明
change	(range, value)	range	レンジの値が変更されたときにイベントがトリガーされます。引数として、イベントハンドラーはレンジインスタンスを受け取ります
rangeChange	(range, value)	app
changed	(range, value)	range	値の変更後、スライダーのつまみがリリースされたときにイベントがトリガーされます。引数として、イベントハンドラーはレンジインスタンスを受け取ります
rangeChanged	(range, value)	app
beforeDestroy	(range)	range	レンジスライダーのインスタンスが破棄される直前にイベントがトリガーされます。引数として、イベントハンドラーはレンジインスタンスを受け取ります
rangeBeforeDestroy	(range)	app

レンジスライダーの自動初期化

レンジスライダーAPIを使用する必要がなく、レンジスライダーがページの内部にあり、ページの初期化時にDOMに表示されている場合は、追加のrange-slider-initクラスを追加するだけで自動的に初期化できます

<!-- Add range-slider-init class -->
<div class="range-slider range-slider-init">
  <input type="range" min="0" max="100" step="1" value="10" />
</div>

この場合、作成されたレンジスライダーのインスタンスにアクセスする必要がある場合は、app.range.getアプリメソッドを使用できます

var range = app.range.get('.range-slider');

if (range.value > 50) {
  // do something
}

自動初期化を使用する場合は、追加のパラメータを渡す必要がある場合があります。これは2つの方法で実行できます

シングルレンジスライダーを使用しており、内部にinput:rangeがある場合は、step、min、max、valueパラメータは同じinput属性から設定できます

<!-- min, max, step, value parameters will be set for same input attributes -->
<div class="range-slider range-slider-init">
  <input type="range" min="0" max="100" step="1" value="10" />
</div>

それ以外の場合、内部にinput:rangeがない場合、またはデュアルレンジinputを使用する場合は、レンジスライダー要素のdata-属性を使用して、利用可能なすべてのパラメータを設定できます。

<!-- parameters set via data- attributes -->
<div
  class="range-slider range-slider-init"
  data-min="0"
  data-max="100"
  data-step="10"
  data-label="true"
  data-value="50"
></div>

デュアルレンジスライダーがある場合は、data-value-leftおよびdata-value-right属性を使用して値を渡す必要があります

<!-- parameters set via data- attributes -->
<div
  class="range-slider range-slider-init"
  data-dual="true"
  data-min="0"
  data-max="100"
  data-step="10"
  data-label="true"
  data-value-left="30"
  data-value-right="60"
></div>

CSS変数

以下は、関連するCSS変数（CSSカスタムプロパティ）のリストです。

コメント化された変数はデフォルトで指定されておらず、その値は、この場合にフォールバックする値であることに注意してください。

:root {
  /*
  --f7-range-bar-active-bg-color: var(--f7-theme-color);
  --f7-range-scale-bg-color: var(--f7-range-bar-bg-color);
  --f7-range-scale-substep-bg-color: var(--f7-range-bar-bg-color);
  */
  --f7-range-scale-step-height: 5px;
  --f7-range-scale-substep-width: 1px;
  --f7-range-scale-substep-height: 4px;
  --f7-range-bar-bg-color: rgba(0, 0, 0, 0.2);
}
:root .dark,
:root.dark {
  --f7-range-bar-bg-color: rgba(255, 255, 255, 0.2);
}
.ios {
  --f7-range-size: 28px;
  --f7-range-bar-size: 4px;
  --f7-range-bar-border-radius: 2px;
  --f7-range-knob-size: 28px;
  --f7-range-knob-color: #fff;
  --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  --f7-range-label-size: 24px;
  --f7-range-label-text-color: #000;
  --f7-range-label-bg-color: #fff;
  --f7-range-label-font-size: 12px;
  --f7-range-label-font-weight: 500;
  --f7-range-label-border-radius: 5px;
  --f7-range-label-padding: 0px 2px;
  --f7-range-scale-text-color: #666;
  --f7-range-scale-step-width: 1px;
  --f7-range-scale-font-size: 12px;
  --f7-range-scale-font-weight: 400;
  --f7-range-scale-label-offset: 4px;
}
.md {
  --f7-range-size: 20px;
  --f7-range-bar-size: 2px;
  --f7-range-bar-border-radius: 0px;
  --f7-range-knob-size: 12px;
  --f7-range-knob-box-shadow: none;
  --f7-range-label-size: 26px;
  --f7-range-label-font-weight: normal;
  --f7-range-label-font-size: 10px;
  --f7-range-label-border-radius: 50%;
  --f7-range-label-padding: 0px;
  --f7-range-scale-step-width: 2px;
  --f7-range-scale-font-size: 12px;
  --f7-range-scale-font-weight: 400;
  --f7-range-scale-label-offset: 4px;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-range-knob-color: var(--f7-theme-color);
  --f7-range-label-text-color: var(--f7-md-on-primary);
  --f7-range-label-bg-color: var(--f7-theme-color);
  --f7-range-scale-text-color: var(--f7-md-on-surface-variant);
}

例

range.html

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Range Slider</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block-title">Volume</div>
      <div class="list list-strong-ios list-outline-ios simple-list">
        <ul>
          <li>
            <div>
              <i class="icon f7-icons if-not-md" style="width: 28px">speaker_fill</i>
              <i class="icon material-icons md-only" style="width: 24px">volume_mute</i>
            </div>
            <div style="width: 100%; margin: 0 16px">
              <div class="range-slider range-slider-init">
                <input type="range" min="0" max="100" step="1" value="10" />
              </div>
            </div>
            <div>
              <i class="icon f7-icons if-not-md" style="width: 28px">speaker_3_fill</i>
              <i class="icon material-icons md-only" style="width: 24px">volume_up</i>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">Brightness</div>
      <div class="list list-strong-ios list-outline-ios simple-list">
        <ul>
          <li>
            <div>
              <i class="icon f7-icons if-not-md" style="width: 28px">sun_min</i>
              <i class="icon material-icons md-only" style="width: 24px">brightness_low</i>
            </div>
            <div style="width: 100%; margin: 0 16px">
              <div class="range-slider range-slider-init color-orange" data-label="true">
                <input type="range" min="0" max="100" step="1" value="50" />
              </div>
            </div>
            <div>
              <i class="icon f7-icons if-not-md" style="width: 28px">sun_max_fill</i>
              <i class="icon material-icons md-only" style="width: 24px">brightness_high</i>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title display-flex justify-content-space-between">
        Price Filter <span class="price-value">$${priceMin} - $${priceMax}</span>
      </div>
      <div class="list list-strong-ios list-outline-ios simple-list">
        <ul>
          <li class="item-row">
            <div>
              <i class="icon f7-icons if-not-md" style="width: 28px">money_dollar_circle</i>
              <i class="icon material-icons md-only" style="width: 24px">attach_money</i>
            </div>
            <div style="width: 100%; margin: 0 16px">
              <div class="range-slider range-slider-init color-green" @range:change=${onPriceChange} data-label="true"
                data-dual="true" data-min="0" data-max="500" data-step="1" data-value-left="200" data-value-right="400">
              </div>
            </div>
            <div>
              <i class="icon f7-icons if-not-md" style="width: 28px">money_dollar_circle_fill</i>
              <i class="icon material-icons md-only" style="width: 24px">monetization_on</i>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">With Scale</div>
      <div class="block block-strong-ios block-outline-ios">
        <div class="range-slider range-slider-init" data-min="0" data-max="100" data-label="true" data-step="5"
          data-value="25" data-scale="true" data-scale-steps="5" data-scale-sub-steps="4"></div>
      </div>
      <div class="block-title">Vertical</div>
      <div class="block block-strong-ios block-outline-ios display-flex justify-content-center">
        <div class="range-slider range-slider-init margin-right" data-vertical="true" data-min="0" data-max="100"
          data-label="true" data-step="1" data-value="25" style="height: 160px"></div>
        <div class="range-slider range-slider-init margin-horizontal" data-vertical="true" data-min="0" data-max="100"
          data-label="true" data-step="1" data-value="50" style="height: 160px"></div>
        <div class="range-slider range-slider-init margin-horizontal" data-vertical="true" data-min="0" data-max="100"
          data-label="true" data-step="1" data-value="75" style="height: 160px"></div>
        <div class="range-slider range-slider-init margin-left" data-dual="true" data-vertical="true" data-min="0"
          data-max="100" data-label="true" data-step="1" data-value-left="25" data-value-right="75"
          style="height: 160px"></div>
      </div>
      <div class="block-title">Vertical Reversed</div>
      <div class="block block-strong-ios block-outline-ios display-flex justify-content-center">
        <div class="range-slider range-slider-init color-red margin-right" data-vertical="true"
          data-vertical-reversed="true" data-min="0" data-max="100" data-label="true" data-step="1" data-value="25"
          style="height: 160px"></div>
        <div class="range-slider range-slider-init color-red margin-horizontal" data-vertical="true"
          data-vertical-reversed="true" data-min="0" data-max="100" data-label="true" data-step="1" data-value="50"
          style="height: 160px"></div>
        <div class="range-slider range-slider-init color-red margin-horizontal" data-vertical="true"
          data-vertical-reversed="true" data-min="0" data-max="100" data-label="true" data-step="1" data-value="75"
          style="height: 160px"></div>
        <div class="range-slider range-slider-init color-red margin-left" data-dual="true" data-vertical="true"
          data-vertical-reversed="true" data-min="0" data-max="100" data-label="true" data-step="1" data-value-left="25"
          data-value-right="75" style="height: 160px"></div>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $f7, $el, $update }) => {
    let priceMin = 200;
    let priceMax = 400;

    const onPriceChange = (e) => {
      const range = $f7.range.get(e.target);
      priceMin = range.value[0];
      priceMax = range.value[1];
      $update();
    };

    return $render;
  };
</script>

このドキュメントを改善する

このページで

レンジスライダーのレイアウト

シングルレンジ
デュアルレンジ

レンジスライダーの色
レンジスライダーのアプリメソッド
レンジスライダーのパラメータ
レンジスライダーのメソッドとプロパティ
レンジスライダーのイベント

DOMイベント
アプリとレンジスライダーインスタンスのイベント

レンジスライダーの自動初期化
CSS変数
例