レンジスライダー

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

シングルレンジ

シングルレンジスライダのレイアウトはとてもシンプルです。

<!-- Range Slider要素 -->
<div class="range-slider">
  <!-- レンジ入力 -->
  <input type="range" min="0" max="100" step="1" value="10" />
</div>

デュアルレンジ

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

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

レンジスライダーの色

Range Sliderはすべてのデフォルトカラーをサポートしています。そのため、レンジスライダー要素にcolor-[color]クラスを追加するだけで色を変更することができます。

<!-- 赤色の範囲 -->
<div class="range-slider color-red">...</div>

<!-- オレンジ色の範囲 -->
<div class="range-slider color-orange">...</div>

レンジスライダーのAppメソッド

Range Sliderに関連するAppメソッドを見てみましょう。

app.range.create(parameters)- Range Sliderインスタンスの作成

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

作成されたRange Sliderのインスタンスを返すメソッド

app.range.destroy(el)- Range Sliderインスタンスの破棄

el - HTMLElementまたはstring（CSSセレクタ付き）またはobject。破棄するRange Slider要素またはRange Sliderインスタンスを指定します。

app.range.get(el)- HTML要素によるRange Sliderインスタンスの取得

el - HTMLElement または string (with CSS Selector). Range Sliderの要素です。

メソッドは、Range Sliderのインスタンスを返します。

app.range.getValue(el)- レンジスライダの値の取得

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

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

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

el - HTMLElement または string (CSSセレクタ付き). Range Sliderの要素です。
value - 数字（シングルレンジの場合）または値の配列（デュアルレンジの場合）。

メソッドはRange Sliderのインスタンスを返します。

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

ここでは、Range Sliderを作成するために必要な、利用可能なパラメータの一覧を見てみましょう。

Parameter	Type	Default	Description
el	HTMLElement string		レンジスライダーの要素。レンジスライダー要素のCSSセレクタを持つHTML要素または文字列
inputEl	HTMLElement string		レンジスライダーの入力要素、または入力要素の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') } } })`

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

Range Sliderを作成するには、まずメソッドを呼び出します。

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

その後、初期化されたインスタンス（上記の例では変数 range のようなもの）に、便利なメソッドとプロパティが追加されます。

Properties
range.app	グローバルアプリのインスタンスへのリンク
range.el	レンジスライダーのHTML要素
range.$el	レンジスライダーを持つDom7インスタンスのHTML要素
range.inputEl	レンジスライダーの入力用HTML要素
range.$inputEl	レンジスライダー入力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	各要素が作成された範囲ノブの HTML 要素を表す配列 (デュアルスライダーの場合は 2 つのノブ)
range.labels	各要素が作成されたレンジノブのラベルの HTML 要素を表す配列 (デュアルスライダーの場合は 2 つのラベル)
range.params	レンジスライダパラメータ
Methods
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)	インスタンスでイベントを発生させる

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

Range Sliderでは、以下のDOMイベントがRange Element上で、イベントがappとRange instance上で発生します。

DOMイベント

Event	Target	Description
range:change	Range Slider Element<div class="range-slider">	Range Slider の値が変更されたときにイベントが発生します。
range:changed	Range Slider Element<div class="range-slider">	値が変更された後、スライダーのノブが離された時にイベントが発生します。
range:beforedestroy	Range Slider Element<div class="range-slider">	イベントはRange Sliderインスタンスが破壊される直前に発生します。

アプリとRange Sliderインスタンスのイベント

Range Sliderインスタンスは、selfインスタンスとappインスタンスの両方でイベントを発行します。アプリインスタンスのイベントは、同じ名前でプレフィックスとして range が付いています。

Event	Arguments	Target	Description
change	(range, value)	range	イベントは範囲の値が変更されたときにトリガーされます。イベントハンドラは引数として range インスタンスを受け取ります。
rangeChange	(range, value)	app
changed	(range, value)	range	値が変更された後、スライダノブが離されるとイベントが発生します。イベントハンドラがレンジのインスタンスを受け取る引数として
rangeChanged	(range, value)	app
beforeDestroy	(range)	range	Range Slider インスタンスが破棄される直前にイベントが発生します。イベントハンドラがレンジインスタンスを受け取る引数として
rangeBeforeDestroy	(range)	app

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

もし、Range Slider APIを使用する必要がなく、Range Sliderがページ内にあり、ページの初期化時にDOMに表示されるのであれば、range-slider-initクラスを追加するだけで、自動的に初期化することができます。

<!-- range-slider-initクラスの追加 -->
<div class="range-slider range-slider-init">
  <input type="range" min="0" max="100" step="1" value="10" />
</div>

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

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

if (range.value > 50) {
  // 何かをする
}

auto initを使用する際には、追加のパラメータを渡す必要があるかもしれません。これには2つの方法があります。

シングルレンジのスライダーを使用していて、内部にinput:rangeを持っている場合、step, min, max, value パラメータを同じ入力属性から設定することができます。

<!-- min, max, step, value パラメータは、同じ入力属性に対して設定されます。 -->
<div class="range-slider range-slider-init">
  <input type="range" min="0" max="100" step="1" value="10" />
</div>

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

<!-- data-属性で設定するパラメータ -->
<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属性を使用して値を渡す必要があります。

<!-- 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 Variables

Below is the list of related CSS variables (CSS custom properties).

Note that commented variables are not specified by default and their values is what they fallback to in this case.

: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-text-color: #666;
  --f7-range-scale-substep-width: 1px;
  --f7-range-scale-substep-height: 4px;
}
.ios {
  --f7-range-size: 28px;
  --f7-range-bar-bg-color: #b7b8b7;
  --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-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-bg-color: #b9b9b9;
  --f7-range-bar-size: 2px;
  --f7-range-bar-border-radius: 0px;
  --f7-range-knob-size: 12px;
  /*
  --f7-range-knob-color: var(--f7-theme-color);
  */
  --f7-range-knob-box-shadow: none;
  --f7-range-label-size: 26px;
  --f7-range-label-font-weight: normal;
  --f7-range-label-text-color: #fff;
  /*
  --f7-range-label-bg-color: var(--f7-theme-color);
  */
  --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;
}
.aurora {
  --f7-range-size: 20px;
  --f7-range-bar-bg-color: #c7c7c7;
  --f7-range-bar-size: 2px;
  --f7-range-bar-border-radius: 2px;
  --f7-range-knob-size: 16px;
  /*
  --f7-range-knob-color: var(--f7-theme-color);
  */
  --f7-range-knob-box-shadow: none;
  --f7-range-label-size: 20px;
  --f7-range-label-text-color: #fff;
  /*
  --f7-range-label-bg-color: var(--f7-theme-color);
  */
  --f7-range-label-font-size: 10px;
  --f7-range-label-font-weight: 600;
  --f7-range-label-border-radius: 4px;
  --f7-range-label-padding: 0px 4px;
  --f7-range-scale-step-width: 2px;
  --f7-range-scale-font-size: 11px;
  --f7-range-scale-font-weight: 500;
  --f7-range-scale-label-offset: 2px;
}

Examples

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Range Slider</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block-title">Volume</div>
      <div class="list simple-list">
        <ul>
          <li>
            <div class="item-cell width-auto flex-shrink-0">
              <i class="icon f7-icons if-not-md" style="width:25px">speaker_fill</i>
              <i class="icon material-icons md-only" style="width:24px">volume_mute</i>
            </div>
            <div class="item-cell flex-shrink-3">
              <div class="range-slider range-slider-init">
                <input type="range" min="0" max="100" step="1" value="10" />
              </div>
            </div>
            <div class="item-cell width-auto flex-shrink-0">
              <i class="icon f7-icons if-not-md" style="width:25px">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 simple-list">
        <ul>
          <li>
            <div class="item-cell width-auto flex-shrink-0">
              <i class="icon f7-icons if-not-md" style="width:25px">sun_min</i>
              <i class="icon material-icons md-only" style="width:24px">brightness_low</i>
            </div>
            <div class="item-cell flex-shrink-3">
              <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 class="item-cell width-auto flex-shrink-0">
              <i class="icon f7-icons if-not-md" style="width:25px">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 simple-list">
        <ul>
          <li class="item-row">
            <div class="item-cell width-auto flex-shrink-0">
              <i class="icon f7-icons if-not-md" style="width:25px">money_dollar_circle</i>
              <i class="icon material-icons md-only" style="width:24px">attach_money</i>
            </div>
            <div class="item-cell item-cell-shrink-3">
              <div
                id="price-filter"
                @range:change=${onPriceChange}
                class="range-slider range-slider-init color-green"
                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 class="item-cell width-auto flex-shrink-0">
              <i class="icon f7-icons if-not-md" style="width:25px">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">
        <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 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 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, $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>