レスタット

レスタットは、Reactで構築されたwww、モバイル、およびアクセス可能なスライダースライダーコンポーネントです。
1,635
作成者ジョシュ・ペレス

Web向けのモバイル、タブレット、デスクトップ、およびアクセス可能なスライダー。

インストール

npm install レスタット

プロップ

アルゴリズム、既定値は線形、スライダーで使用します。形状に準拠する限り、独自のアルゴリズムを作成することもできます。

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

レスタットのルートに適用されるカスタムクラス名。

  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ファイルを含めるか、独自の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'));

ライブプレイグラウンド

さらに多くの例については、ストーリーブックを確認してください。

  • このリポジトリをマシン上で複製します。
  • npm install
  • npm run storybook
  • https://:9001/にアクセスしてください。
リンク