Rheostat

一个适用于网页的移动端、平板电脑、桌面端和无障碍滑块。

安装

npm install rheostat

属性

算法，默认为linear，滑块将使用该算法。只要符合形状，您可以随意编写自己的算法。

  algorithm: PropTypes.shape({
    getValue: PropTypes.func,
    getPosition: PropTypes.func,
  })

将应用于 Rheostat 根元素的自定义类名。

  className: PropTypes.string

用于句柄和“进度”条的自定义 React 组件覆盖。

  handle: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
  progressBar: PropTypes.oneOfType([PropTypes.func, PropTypes.string])

最大值和最小值，默认为 0-100。

  max: PropTypes.number
  min: PropTypes.number

pitComponent 是一个自定义 React 组件，用于在进度条上渲染“标记”。pitPoints 是渲染标记的点集。点是一个包含滑块上values的数组。

  pitComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
  pitPoints: PropTypes.arrayOf(PropTypes.number)

注意：每当值更改并提交时，都会调用onChange。这发生在拖动、按键或点击事件结束时。当您希望持久保存值时，建议使用onChange。

onValuesUpdated 是一个便利事件，在值正在被主动更改时触发。这包括拖动、点击或按键。如果您需要在值提交前处理它们，建议使用onValuesUpdated。

  onChange: PropTypes.func
  onClick: PropTypes.func
  onKeyPress: PropTypes.func
  onSliderDragEnd: PropTypes.func
  onSliderDragMove: PropTypes.func
  onSliderDragStart: PropTypes.func
  onValuesUpdated: PropTypes.func

snap 是一个布尔值，控制滑块的吸附行为。snapPoints 是滑块应该吸附到的滑块上values的数组。

如果将snap设置为 true 且未设置snapPoints，则滑块将吸附到绝对位置。例如，在 1-10 的刻度上，如果滑块在 54% 处松开，它将选择值 5 并吸附到 50%。

  snap: PropTypes.bool
  snapPoints: PropTypes.arrayOf(PropTypes.number)

值，默认为 0 和 100。

  values: PropTypes.arrayOf(PropTypes.number)

您可以禁用滑块以阻止用户移动它。

  disabled: PropTypes.bool

用法

重要：确保包含css 文件，或者您可以随意创建自己的样式。

• 简单的例子。

import Rheostat from 'rheostat';

ReactDOM.render(<Rheostat />, document.getElementById('slider-root'));

• 具有多个句柄的滑块。

import Rheostat from 'rheostat';

ReactDOM.render((
  <Rheostat
    min={1}
    max={100}
    values={[1, 100]}
  />
), document.getElementById('slider-root'));

在线演示

更多示例，您可以查看 storybook。

• 克隆此仓库到您的本地机器。
• npm install
• npm run storybook
• 访问http://localhost:9001/。