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

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

Range Sliderコンポーネント

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

Range (レンジ)

Range Sliderのプロパティ

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

import React, { useState } from 'react';
import {
  Page,
  Navbar,
  BlockTitle,
  List,
  ListItem,
  ListItemCell,
  Icon,
  Range,
  Block,
} from 'framework7-react';

export default () => {
  const [priceMin, setPriceMin] = useState(200);
  const [priceMax, setPriceMax] = useState(200);

  const onPriceChange = (values) => {
    setPriceMin(values[0]);
    setPriceMax(values[1]);
  };
  return (
    
      
    <Page>
      <Navbar title="Range Slider"></Navbar>

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

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

      <BlockTitle className="display-flex justify-content-space-between">
        Price Filter{' '}
        <span>
          ${priceMin} - ${priceMax}
        </span>
      </BlockTitle>
      <List simpleList>
        <ListItem>
          <ListItemCell className="width-auto flex-shrink-0">
            <Icon
              ios="f7:money_dollar_circle"
              aurora="f7:money_dollar_circle"
              md="material:attach_money"
            />
          </ListItemCell>
          <ListItemCell className="flex-shrink-3">
            <Range
              min={0}
              max={500}
              step={1}
              value={[priceMin, priceMax]}
              label={true}
              dual={true}
              color="green"
              onRangeChange={onPriceChange}
            />
          </ListItemCell>
          <ListItemCell className="width-auto flex-shrink-0">
            <Icon
              ios="f7:money_dollar_circle_fill"
              aurora="f7:money_dollar_circle_fill"
              md="material:monetization_on"
            />
          </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 className="display-flex justify-content-center">
        <Range
          className="margin-right"
          style={{ height: '160px' }}
          vertical={true}
          min={0}
          max={100}
          label={true}
          step={1}
          value={25}
        />
        <Range
          className="margin-horizontal"
          style={{ height: '160px' }}
          vertical={true}
          min={0}
          max={100}
          label={true}
          step={1}
          value={50}
        />
        <Range
          className="margin-horizontal"
          style={{ height: '160px' }}
          vertical={true}
          min={0}
          max={100}
          label={true}
          step={1}
          value={75}
        />
        <Range
          className="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 className="display-flex justify-content-center">
        <Range
          className="margin-right"
          color="red"
          style={{ height: '160px' }}
          vertical={true}
          verticalReversed={true}
          min={0}
          max={100}
          label={true}
          step={1}
          value={25}
        />
        <Range
          className="margin-horizontal"
          color="red"
          style={{ height: '160px' }}
          vertical={true}
          verticalReversed={true}
          min={0}
          max={100}
          label={true}
          step={1}
          value={50}
        />
        <Range
          className="margin-horizontal"
          color="red"
          style={{ height: '160px' }}
          vertical={true}
          verticalReversed={true}
          min={0}
          max={100}
          label={true}
          step={1}
          value={75}
        />
        <Range
          className="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>
      
    
  );
};