スポンサースポンサーになる

レンジスライダー Vue コンポーネント

レンジスライダー Vue コンポーネントは、レンジスライダーコンポーネントを表します。

レンジスライダーコンポーネント

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

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

Propタイプデフォルト説明
<f7-range> プロパティ
initbooleantrueレンジスライダーを初期化します
valuenumber
array
string		レンジスライダーの値。デュアルレンジスライダーの場合は配列にする必要があります。
minnumber
string		最小値
maxnumber
string		最大値
stepnumber
string		1値間の最小ステップ
labelbooleanfalseレンジスライダーのノブの周りに追加のラベルを有効にします
dualbooleanfalseデュアルレンジスライダーを有効にします
verticalbooleanfalse垂直レンジスライダーを有効にします
vertical-reversedbooleanfalse垂直レンジスライダーを反転させます（vertical:trueの場合のみ）
draggable-barbooleantrue有効にすると、レンジバーのクリックとスワイプでレンジスライダーを操作（値を変更）することもできます。
format-labelfunction(value)メソッドは、フォーマットされたレンジノブラベルテキストを返す必要があります。引数としてラベル値を受け取ります
scalebooleanfalseレンジスライダースケールを有効にします
scale-stepsnumber5スケールステップの数
scale-sub-stepsnumber0スケールサブステップの数（各ステップはこの値で分割されます）
format-scale-labelfunction (value)メソッドは、フォーマットされたスケール値を返す必要があります。引数として現在のスケールステップ値を受け取ります。このメソッドは、スケールステップごとに呼び出されます。
limit-knob-positionbooleanノブの位置をレンジバーのサイズに制限します。デフォルトでは iOS テーマで有効になっています
disabledbooleanfalseレンジスライダーを無効にするかどうかを定義します
idstringレンジスライダー要素の ID 属性
inputbooleanfalse有効にすると、内部に input type="range" 要素もレンダリングします
input-idstring入力要素の ID 属性
namestring入力要素の "name" 属性

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

イベント説明
<f7-range> イベント
range:changeレンジスライダーの値が変更されたときにイベントがトリガーされます
range:changed値の変更後にスライダーノブが離されたときにイベントがトリガーされます

ステッパー v-model

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>

例

range.vue
<template>
  <f7-page>
    <f7-navbar title="Range Slider"></f7-navbar>

    <f7-block-title>Volume</f7-block-title>
    <f7-list simple-list outline-ios strong-ios>
      <f7-list-item>
        <div>
          <f7-icon ios="f7:speaker_fill" md="material:volume_mute" />
        </div>
        <div style="width: 100%; margin: 0 16px">
          <f7-range :min="0" :max="100" :step="1" :value="10" />
        </div>
        <div>
          <f7-icon ios="f7:speaker_3_fill" md="material:volume_up" />
        </div>
      </f7-list-item>
    </f7-list>

    <f7-block-title>Brightness</f7-block-title>
    <f7-list simple-list outline-ios strong-ios>
      <f7-list-item>
        <div>
          <f7-icon ios="f7:sun_min" md="material:brightness_low" />
        </div>
        <div style="width: 100%; margin: 0 16px">
          <f7-range :min="0" :max="100" :step="1" :value="50" :label="true" color="orange" />
        </div>
        <div>
          <f7-icon ios="f7:sun_max_fill" md="material:brightness_high" />
        </div>
      </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 outline-ios strong-ios>
      <f7-list-item>
        <div>
          <f7-icon ios="f7:money_dollar_circle" md="material:attach_money" />
        </div>
        <div style="width: 100%; margin: 0 16px">
          <f7-range
            :min="0"
            :max="500"
            :step="1"
            :value="[priceMin, priceMax]"
            :label="true"
            :dual="true"
            color="green"
            @range:change="onPriceChange"
          />
        </div>
        <div>
          <f7-icon ios="f7:money_dollar_circle_fill" md="material:monetization_on" />
        </div>
      </f7-list-item>
    </f7-list>

    <f7-block-title>With Scale</f7-block-title>
    <f7-block strong-ios outline-ios>
      <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-ios outline-ios 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-ios outline-ios 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 {
  f7Navbar,
  f7Page,
  f7BlockTitle,
  f7Range,
  f7List,
  f7ListItem,
  f7Icon,
  f7Block,
} from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7BlockTitle,
    f7Range,
    f7List,
    f7ListItem,
    f7Icon,
    f7Block,
  },
  data() {
    return {
      priceMin: 200,
      priceMax: 400,
    };
  },
  methods: {
    onPriceChange(values) {
      this.priceMin = values[0];
      this.priceMax = values[1];
    },
  },
};
</script>
このドキュメントを改善する
このページについて