范围滑块 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 | 字符串 | 输入元素“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>
);
};