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

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

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

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

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

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

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

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

イベント説明
<Range> イベント
rangeChangeレンジスライダーの値が変更されたときにイベントがトリガーされます
rangeChanged値の変更後、スライダーノブを離したときにイベントがトリガーされます

例

range.svelte
<script>
  import { Navbar, Page, BlockTitle, Range, List, ListItem, Icon, Block } from 'framework7-svelte';

  let priceMin = 200;
  let priceMax = 400;

  function onPriceChange(values) {
    priceMin = values[0];
    priceMax = values[1];
  }
</script>

<Page>
  <Navbar title="Range Slider" />

  <BlockTitle>Volume</BlockTitle>
  <List simpleList strongIos outlineIos>
    <ListItem>
      <div>
        <Icon ios="f7:speaker_fill" md="material:volume_mute" />
      </div>
      <div style="width: 100%; margin: 0 16px">
        <Range min={0} max={100} step={1} value={10} />
      </div>
      <div>
        <Icon ios="f7:speaker_3_fill" md="material:volume_up" />
      </div>
    </ListItem>
  </List>

  <BlockTitle>Brightness</BlockTitle>
  <List simpleList strongIos outlineIos>
    <ListItem>
      <div>
        <Icon ios="f7:sun_min" md="material:brightness_low" />
      </div>
      <div style="width: 100%; margin: 0 16px">
        <Range min={0} max={100} step={1} value={50} label={true} color="orange" />
      </div>
      <div>
        <Icon ios="f7:sun_max_fill" md="material:brightness_high" />
      </div>
    </ListItem>
  </List>

  <BlockTitle class="display-flex justify-content-space-between">
    Price Filter
    <span>${priceMin} - ${priceMax}</span>
  </BlockTitle>
  <List simpleList strongIos outlineIos>
    <ListItem>
      <div>
        <Icon ios="f7:money_dollar_circle" md="material:attach_money" />
      </div>
      <div style="width: 100%; margin: 0 16px">
        <Range
          min={0}
          max={500}
          step={1}
          value={[priceMin, priceMax]}
          label={true}
          dual={true}
          color="green"
          onRangeChange={onPriceChange}
        />
      </div>
      <div>
        <Icon ios="f7:money_dollar_circle_fill" md="material:monetization_on" />
      </div>
    </ListItem>
  </List>

  <BlockTitle>With Scale</BlockTitle>
  <Block strongIos outlineIos>
    <Range
      min={0}
      max={100}
      label={true}
      step={5}
      value={25}
      scale={true}
      scaleSteps={5}
      scaleSubSteps={4}
    />
  </Block>

  <BlockTitle>Vertical</BlockTitle>
  <Block strongIos outlineIos class="display-flex justify-content-center">
    <Range
      class="margin-right"
      style="height: 160px"
      vertical={true}
      min={0}
      max={100}
      label={true}
      step={1}
      value={25}
    />
    <Range
      class="margin-horizontal"
      style="height: 160px"
      vertical={true}
      min={0}
      max={100}
      label={true}
      step={1}
      value={50}
    />
    <Range
      class="margin-horizontal"
      style="height: 160px"
      vertical={true}
      min={0}
      max={100}
      label={true}
      step={1}
      value={75}
    />
    <Range
      class="margin-left"
      style="height: 160px"
      dual={true}
      vertical={true}
      min={0}
      max={100}
      label={true}
      step={1}
      value={[25, 75]}
    />
  </Block>

  <BlockTitle>Vertical Reversed</BlockTitle>
  <Block strongIos outlineIos class="display-flex justify-content-center">
    <Range
      class="margin-right"
      color="red"
      style="height: 160px"
      vertical={true}
      verticalReversed={true}
      min={0}
      max={100}
      label={true}
      step={1}
      value={25}
    />
    <Range
      class="margin-horizontal"
      color="red"
      style="height: 160px"
      vertical={true}
      verticalReversed={true}
      min={0}
      max={100}
      label={true}
      step={1}
      value={50}
    />
    <Range
      class="margin-horizontal"
      color="red"
      style="height: 160px"
      vertical={true}
      verticalReversed={true}
      min={0}
      max={100}
      label={true}
      step={1}
      value={75}
    />
    <Range
      class="margin-left"
      color="red"
      style="height: 160px"
      dual={true}
      vertical={true}
      verticalReversed={true}
      min={0}
      max={100}
      label={true}
      step={1}
      value={[25, 75]}
    />
  </Block>
</Page>
このドキュメントを改善する
このページ