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/。