Range Slider Svelte Component（レンジスライダー・Svelte・コンポーネント

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

Range Slider コンポーネント

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

Range

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

Prop	Type	Default	Description
<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	垂直方向のレンジスライダを有効にする
verticalReversed	boolean	false	垂直方向のレンジスライダを反転させます。(`vertical:true` の場合のみ)
draggableBar	boolean	true	有効にすると、レンジバーのクリックやスワイプでレンジスライダーを操作することができます（値の変更）。
formatLabel	function(value)		メソッドはフォーマットされたレンジノブのラベルテキストを返さなければなりません。引数として、ラベルの値を受け取ります。
scale	boolean	false	レンジスライダーのスケールを有効にする
scaleSteps	number	5	スケールのステップ数
scaleSubSteps	number	0	スケールのサブステップの数（各ステップはこの値で分割されます
formatScaleLabel	function (value)		メソッドはフォーマットされたスケール値を返さなければならない。引数として、現在のスケールステップ値を受け取ります。このメソッドは、各スケールステップごとに呼び出されます。
limitKnobPosition	boolean		ノブの位置をレンジバーの大きさに制限します。デフォルトでは、iOSテーマから有効になっています。
disabled	boolean	false	範囲スライダを無効にするかどうかを定義します。
id	string		レンジスライダーの要素ID属性
input	boolean	false	有効にすると、`input type="range"` 要素を内部にもレンダリングします。
inputId	string		入力要素のID属性
name	string		入力要素の "name "属性

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

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

Examples

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

  <BlockTitle>Volume</BlockTitle>
  <List simpleList>
    <ListItem>
      <ListItemCell class="width-auto flex-shrink-0">
        <Icon ios="f7:speaker_fill" aurora="f7:speaker_fill" md="material:volume_mute"></Icon>
      </ListItemCell>
      <ListItemCell class="flex-shrink-3">
        <Range
          min={0}
          max={100}
          step={1}
          value={10}
        ></Range>
      </ListItemCell>
      <ListItemCell class="width-auto flex-shrink-0">
        <Icon ios="f7:speaker_3_fill" aurora="f7:speaker_3_fill" md="material:volume_up"></Icon>
      </ListItemCell>
    </ListItem>
  </List>

  <BlockTitle>Brightness</BlockTitle>
  <List simpleList>
    <ListItem>
      <ListItemCell class="width-auto flex-shrink-0">
        <Icon ios="f7:sun_min" aurora="f7:sun_min" md="material:brightness_low"></Icon>
      </ListItemCell>
      <ListItemCell class="flex-shrink-3">
        <Range
          min={0}
          max={100}
          step={1}
          value={50}
          label={true}
          color="orange"
        ></Range>
      </ListItemCell>
      <ListItemCell class="width-auto flex-shrink-0">
        <Icon ios="f7:sun_max_fill" aurora="f7:sun_max_fill" md="material:brightness_high"></Icon>
      </ListItemCell>
    </ListItem>
  </List>

  <BlockTitle class="display-flex justify-content-space-between">
    <span>Price Filter</span>
    <span>${priceMin} - ${priceMax}</span>
  </BlockTitle>
  <List simpleList>
    <ListItem>
      <ListItemCell class="width-auto flex-shrink-0">
        <Icon ios="f7:money_dollar_circle" aurora="f7:money_dollar_circle" md="material:attach_money"></Icon>
      </ListItemCell>
      <ListItemCell class="flex-shrink-3">
        <Range
          min={0}
          max={500}
          step={1}
          value={[priceMin, priceMax]}
          label={true}
          dual={true}
          color="green"
          onRangeChange={onPriceChange}
        ></Range>
      </ListItemCell>
      <ListItemCell class="width-auto flex-shrink-0">
        <Icon ios="f7:money_dollar_circle_fill" aurora="f7:money_dollar_circle_fill" md="material:monetization_on"></Icon>
      </ListItemCell>
    </ListItem>
  </List>

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

  <BlockTitle>Vertical</BlockTitle>
  <Block strong 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 strong 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>
  


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

  let priceMin = 200;
  let priceMax = 400;

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