Range Slider Vue Component (レンジスライダー)

Range Slider Vueコンポーネントは、Range Sliderコンポーネントを表します。

Range Slider コンポーネント

以下のコンポーネントが含まれています。

f7-range

レンジスライダーのプロパティ

Prop	Type	Default	Description
<f7-range> properties
init	boolean	true	レンジスライダの初期化
value	number array string		レンジスライダの値。デュアルレンジスライダの場合は、配列でなければなりません。
min	number string		最小値
max	number string		最大値
step	number string	1	値の間の最小ステップ
label	boolean	false	レンジスライダのノブの周りにラベルを表示
dual	boolean	false	デュアルレンジスライダを有効にする
vertical	boolean	false	垂直方向のレンジスライダを有効にする
vertical-reversed	boolean	false	垂直方向のレンジスライダを反転させます。(`vertical:true` の場合のみ)
draggable-bar	boolean	true	有効にすると、レンジバーのクリックやスワイプでレンジスライダーを操作することができます（値の変更）。
format-label	function(value)		メソッドはフォーマットされたレンジノブのラベルテキストを返さなければなりません。引数として、ラベルの値を受け取ります。
scale	boolean	false	レンジスライダーのスケールを有効にする
scale-steps	number	5	スケールのステップ数
scale-sub-steps	number	0	スケールのサブステップの数（各ステップはこの値で分割されます
format-scale-label	function (value)		メソッドはフォーマットされたスケール値を返さなければならない。引数として、現在のスケールステップ値を受け取ります。このメソッドは、各スケールステップごとに呼び出されます。
limit-knob-position	boolean		ノブの位置をレンジバーの大きさに制限します。デフォルトでは、iOSテーマから有効になっています。
disabled	boolean	false	範囲スライダを無効にするかどうかを定義します。
id	string		レンジスライダーの要素ID属性
input	boolean	false	有効にすると、`input type="range"` 要素を内部にもレンダリングします。
input-id	string		入力要素のID属性
name	string		入力要素の "name "属性

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

Event	Description
<f7-range> events
range:change	レンジスライダーの値が変更されるとイベントが発生します。
range:changed	スライダーの値が変更された後、スライダーのノブが離されるとイベントが発生します。

ステッパーのvモデル

f7-rangeコンポーネントは、valueプロップでv-modelをサポートしています。

<template>
  <p>Value is {{ count }}</p>
  ...
  <f7-range
    :min="0"
    :max="100"
    :step="1"
    v-model:value="count"
  />
  ...
</template>
<script>
  export default {
    data() {
      count: 50,
    },
    ...
  };
</script>

Examples

<template>
<f7-page>
  <f7-navbar title="Range Slider"></f7-navbar>
  <f7-block-title>Volume</f7-block-title>
  <f7-list simple-list>
    <f7-list-item>
      <f7-list-item-cell
        class="flex-shrink-0"
        :style="{ width: theme.ios ? '28px' : theme.md ? '24px' : '18px' }"
      >
        <f7-icon
          ios="f7:speaker_fill"
          aurora="f7:speaker_fill"
          md="material:volume_mute"
        ></f7-icon>
      </f7-list-item-cell>
      <f7-list-item-cell class="flex-shrink-3">
        <f7-range :min="0" :max="100" :step="1" :value="10" />
      </f7-list-item-cell>
      <f7-list-item-cell
        class="flex-shrink-0"
        :style="{ width: theme.ios ? '28px' : theme.md ? '24px' : '18px' }"
      >
        <f7-icon
          ios="f7:speaker_3_fill"
          aurora="f7:speaker_3_fill"
          md="material:volume_up"
        ></f7-icon>
      </f7-list-item-cell>
    </f7-list-item>
  </f7-list>

  <f7-block-title>Brightness</f7-block-title>
  <f7-list simple-list>
    <f7-list-item>
      <f7-list-item-cell
        class="flex-shrink-0"
        :style="{ width: theme.ios ? '28px' : theme.md ? '24px' : '18px' }"
      >
        <f7-icon ios="f7:sun_min" aurora="f7:sun_min" md="material:brightness_low"></f7-icon>
      </f7-list-item-cell>
      <f7-list-item-cell class="flex-shrink-3">
        <f7-range :min="0" :max="100" :step="1" :value="50" :label="true" color="orange" />
      </f7-list-item-cell>
      <f7-list-item-cell
        class="flex-shrink-0"
        :style="{ width: theme.ios ? '28px' : theme.md ? '24px' : '18px' }"
      >
        <f7-icon
          ios="f7:sun_max_fill"
          aurora="f7:sun_max_fill"
          md="material:brightness_high"
        ></f7-icon>
      </f7-list-item-cell>
    </f7-list-item>
  </f7-list>

  <f7-block-title class="display-flex justify-content-space-between"
    >Price Filter <span>${{ priceMin }} - ${{ priceMax }}</span></f7-block-title
  >
  <f7-list simple-list>
    <f7-list-item>
      <f7-list-item-cell
        class="flex-shrink-0"
        :style="{ width: theme.ios ? '28px' : theme.md ? '24px' : '18px' }"
      >
        <f7-icon
          ios="f7:money_dollar_circle"
          aurora="f7:money_dollar_circle"
          md="material:attach_money"
        ></f7-icon>
      </f7-list-item-cell>
      <f7-list-item-cell class="flex-shrink-3">
        <f7-range
          :min="0"
          :max="500"
          :step="1"
          :value="[priceMin, priceMax]"
          :label="true"
          :dual="true"
          color="green"
          @range:change="onPriceChange"
        />
      </f7-list-item-cell>
      <f7-list-item-cell
        class="flex-shrink-0"
        :style="{ width: theme.ios ? '28px' : theme.md ? '24px' : '18px' }"
      >
        <f7-icon
          ios="f7:money_dollar_circle_fill"
          aurora="f7:money_dollar_circle_fill"
          md="material:monetization_on"
        ></f7-icon>
      </f7-list-item-cell>
    </f7-list-item>
  </f7-list>

  <f7-block-title>With Scale</f7-block-title>
  <f7-block strong>
    <f7-range
      :min="0"
      :max="100"
      :label="true"
      :step="5"
      :value="25"
      :scale="true"
      :scale-steps="5"
      :scale-sub-steps="4"
    />
  </f7-block>

  <f7-block-title>Vertical</f7-block-title>
  <f7-block strong class="display-flex justify-content-center">
    <f7-range
      class="margin-right"
      style="height: 160px"
      :vertical="true"
      :min="0"
      :max="100"
      :label="true"
      :step="1"
      :value="25"
    />
    <f7-range
      class="margin-horizontal"
      style="height: 160px"
      :vertical="true"
      :min="0"
      :max="100"
      :label="true"
      :step="1"
      :value="50"
    />
    <f7-range
      class="margin-horizontal"
      style="height: 160px"
      :vertical="true"
      :min="0"
      :max="100"
      :label="true"
      :step="1"
      :value="75"
    />
    <f7-range
      class="margin-left"
      style="height: 160px"
      :dual="true"
      :vertical="true"
      :min="0"
      :max="100"
      :label="true"
      :step="1"
      :value="[25, 75]"
    />
  </f7-block>

  <f7-block-title>Vertical Reversed</f7-block-title>
  <f7-block strong class="display-flex justify-content-center">
    <f7-range
      class="margin-right"
      color="red"
      style="height: 160px"
      :vertical="true"
      :vertical-reversed="true"
      :min="0"
      :max="100"
      :label="true"
      :step="1"
      :value="25"
    />
    <f7-range
      class="margin-horizontal"
      color="red"
      style="height: 160px"
      :vertical="true"
      :vertical-reversed="true"
      :min="0"
      :max="100"
      :label="true"
      :step="1"
      :value="50"
    />
    <f7-range
      class="margin-horizontal"
      color="red"
      style="height: 160px"
      :vertical="true"
      :vertical-reversed="true"
      :min="0"
      :max="100"
      :label="true"
      :step="1"
      :value="75"
    />
    <f7-range
      class="margin-left"
      color="red"
      style="height: 160px"
      :dual="true"
      :vertical="true"
      :vertical-reversed="true"
      :min="0"
      :max="100"
      :label="true"
      :step="1"
      :value="[25, 75]"
    />
  </f7-block>
</f7-page>
</template>
<script>
import { theme } from 'framework7-vue';

export default {
  data() {
    return {
      theme,
      priceMin: 200,
      priceMax: 400,
    };
  },
  methods: {
    onPriceChange(values) {
      this.priceMin = values[0];
      this.priceMax = values[1];
    },
  },
};
</script>