範圍滑塊 React 元件

範圍滑塊 React 元件表示範圍滑塊元件。

範圍滑塊元件

包含下列元件

範圍

範圍滑桿屬性

屬性	類型	預設值	說明
<Range> 屬性
init	布林值	true	初始化範圍滑桿
value	數字陣列字串		範圍滑桿值，在雙範圍滑桿的情況下必須為陣列
min	數字字串		最小值
max	數字字串		最大值
step	數字字串	1	值之間的最小步長
label	布林值	false	在範圍滑桿旋鈕周圍啟用額外的標籤
dual	布林值	false	啟用雙範圍滑桿
vertical	布林值	false	啟用垂直範圍滑桿
verticalReversed	布林值	false	使垂直範圍滑桿反轉。（僅在 `vertical:true` 時）
draggableBar	布林值	true	啟用後，也可以透過範圍滑桿列點選和滑動來與範圍滑桿互動（變更值）。
formatLabel	函式(value)		方法必須傳回格式化的範圍旋鈕標籤文字。它會收到標籤值作為參數
scale	布林值	false	啟用範圍滑桿刻度
scaleSteps	數字	5	刻度步驟數
scaleSubSteps	數字	0	刻度子步驟數（每個步驟將除以這個值）
formatScaleLabel	函式 (value)		方法必須傳回格式化的刻度值。它會收到目前的刻度步驟值作為參數。這個方法會針對每個刻度步驟呼叫。
limitKnobPosition	布林值		將旋鈕位置限制在範圍列的大小。預設從 iOS 主題啟用
disabled	布林值	false	定義範圍滑桿是否已停用
id	字串		範圍滑桿元素 ID 屬性
input	布林值	false	如果啟用，則也會在裡面呈現 `input type="range"` 元素
inputId	字串		輸入元素 ID 屬性
name	字串		輸入元素「名稱」屬性

範圍滑桿事件

事件	說明
<Range> 事件
rangeChange	當範圍滑桿值已變更時，將觸發事件
rangeChanged	在值變更後，當滑桿旋鈕釋放時，將觸發事件

範例

range.jsx

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

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

  const onPriceChange = (values) => {
    setPriceMin(values[0]);
    setPriceMax(values[1]);
  };

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

      <BlockTitle>Volume</BlockTitle>
      <List simpleList outlineIos strongIos>
        <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 outlineIos strongIos>
        <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 className="display-flex justify-content-space-between">
        Price Filter{' '}
        <span>
          ${priceMin} - ${priceMax}
        </span>
      </BlockTitle>
      <List simpleList outlineIos strongIos>
        <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 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 strongIos outlineIos 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>
  );
};

改善此文件

在此頁面上

範圍滑塊元件
範圍滑桿屬性
範圍滑桿事件
範例