スライダー

ユーザーが指定された範囲内から値を選択する入力。

import React from 'react';
import * as Slider from '@radix-ui/react-slider';
import './styles.css';

const SliderDemo = () => (
  <form>
    <Slider.Root className="SliderRoot" defaultValue={[50]} max={100} step={1}>
      <Slider.Track className="SliderTrack">
        <Slider.Range className="SliderRange" />
      </Slider.Track>
      <Slider.Thumb className="SliderThumb" aria-label="Volume" />
    </Slider.Root>
  </form>
);

export default SliderDemo;

機能

制御することも、制御しないことも可能です。

複数のサムをサポートします。

サム間の最小値をサポートします。

トラックのタッチまたはクリックによる値の更新をサポートします。

右から左への方向をサポートします。

完全なキーボードナビゲーション。

インストール

コマンドラインからコンポーネントをインストールします。

npm install @radix-ui/react-slider

構成

すべてのパーツをインポートして組み合わせます。

import * as Slider from '@radix-ui/react-slider';

export default () => (
  <Slider.Root>
    <Slider.Track>
      <Slider.Range />
    </Slider.Track>
    <Slider.Thumb />
  </Slider.Root>
);

API リファレンス

ルート

スライダーのすべてのパーツを含みます。form内で使用する場合は、イベントが正しく伝播するように、サムごとにinputをレンダリングします。

Prop	型	デフォルト
`asChild`	`boolean`	`false`
`defaultValue`	`number[]`	デフォルト値なし
`value`	`number[]`	デフォルト値なし
`onValueChange`	`function`	デフォルト値なし
`onValueCommit`	`function`	デフォルト値なし
`name`	`string`	デフォルト値なし
`disabled`	`boolean`	`false`
`orientation`	`enum`	`"horizontal"`
`dir`	`enum`	デフォルト値なし
`inverted`	`boolean`	`false`
`min`	`number`	`0`
`max`	`number`	`100`
`step`	`number`	`1`
`minStepsBetweenThumbs`	`number`	`0`

データ属性	値
`[data-disabled]`	無効時に存在
`[data-orientation]`	`"vertical" \|"horizontal"`

トラック

Slider.Rangeを含むトラック。

Prop	型	デフォルト
`asChild`	`boolean`	`false`

データ属性	値
`[data-disabled]`	無効時に存在
`[data-orientation]`	`"vertical" \|"horizontal"`

範囲

範囲部分。Slider.Track内に配置する必要があります。

Prop	型	デフォルト
`asChild`	`boolean`	`false`

データ属性	値
`[data-disabled]`	無効時に存在
`[data-orientation]`	`"vertical" \|"horizontal"`

サム

ドラッグ可能なサム。複数のサムをレンダリングできます。

Prop	型	デフォルト
`asChild`	`boolean`	`false`

データ属性	値
`[data-disabled]`	無効時に存在
`[data-orientation]`	`"vertical" \|"horizontal"`

例

垂直方向

垂直スライダーを作成するには、orientation プロパティを使用します。

// index.jsx
import * as Slider from '@radix-ui/react-slider';
import './styles.css';

export default () => (
  <Slider.Root
    className="SliderRoot"
    defaultValue={[50]}
    orientation="vertical"
  >
    <Slider.Track className="SliderTrack">
      <Slider.Range className="SliderRange" />
    </Slider.Track>
    <Slider.Thumb className="SliderThumb" />
  </Slider.Root>
);

/* styles.css */
.SliderRoot {
  position: relative;
  display: flex;
  align-items: center;
}
.SliderRoot[data-orientation='vertical'] {
  flex-direction: column;
  width: 20px;
  height: 100px;
}

.SliderTrack {
  position: relative;
  flex-grow: 1;
  background-color: grey;
}
.SliderTrack[data-orientation='vertical'] {
  width: 3px;
}

.SliderRange {
  position: absolute;
  background-color: black;
}
.SliderRange[data-orientation='vertical'] {
  width: 100%;
}

.SliderThumb {
  display: block;
  width: 20px;
  height: 20px;
  background-color: black;
}

範囲の作成

複数のサムと値を追加して、範囲スライダーを作成します。

import * as Slider from '@radix-ui/react-slider';

export default () => (
  <Slider.Root defaultValue={[25, 75]}>
    <Slider.Track>
      <Slider.Range />
    </Slider.Track>
    <Slider.Thumb />
    <Slider.Thumb />
  </Slider.Root>
);

ステップサイズの定義

step プロパティを使用して、ステップ間隔を増やします。

import * as Slider from '@radix-ui/react-slider';

export default () => (
  <Slider.Root defaultValue={[50]} step={10}>
    <Slider.Track>
      <Slider.Range />
    </Slider.Track>
    <Slider.Thumb />
  </Slider.Root>
);

サムの重なりを防ぐ

同じ値を持つサムを避けるには、minStepsBetweenThumbs を使用します。

import * as Slider from '@radix-ui/react-slider';

export default () => (
  <Slider.Root defaultValue={[25, 75]} step={10} minStepsBetweenThumbs={1}>
    <Slider.Track>
      <Slider.Range />
    </Slider.Track>
    <Slider.Thumb />
    <Slider.Thumb />
  </Slider.Root>
);

アクセシビリティ

Slider WAI-ARIA デザインパターンに準拠しています。

キーボード操作

キー	説明
`ArrowRight`	`step` 値によって増減します。 `orientation`.
`ArrowLeft`	`step` 値によって増減します。 `orientation`.
`ArrowUp`	`step` の量だけ値を増やします。
`ArrowDown`	`step` の量だけ値を減らします。
`PageUp`	より大きい `step` で値を増やします。
`PageDown`	より大きい `step` で値を減らします。
`Shift + ArrowUp`	より大きい `step` で値を増やします。
`Shift + ArrowDown`	より大きい `step` で値を減らします。
`Home`	値を最小値に設定します。
`End`	値を最大値に設定します。

カスタム API

プリミティブな部分を独自のコンポーネントに抽象化することで、独自の API を作成します。

すべての部分を抽象化する

この例では、Slider のすべての部分を抽象化して、自己完結型の要素として使用できるようにしています。

使用法

import { Slider } from './your-slider';

export default () => <Slider defaultValue={[25]} />;

実装

// your-slider.jsx
import * as SliderPrimitive from '@radix-ui/react-slider';

export const Slider = React.forwardRef((props, forwardedRef) => {
  const value = props.value || props.defaultValue;

  return (
    <SliderPrimitive.Slider {...props} ref={forwardedRef}>
      <SliderPrimitive.Track>
        <SliderPrimitive.Range />
      </SliderPrimitive.Track>
      {value.map((_, i) => (
        <SliderPrimitive.Thumb key={i} />
      ))}
    </SliderPrimitive.Slider>
  );
});

注意点

マウスイベントは発火しない

実装中に直面した制限により、次の例は期待どおりに動作せず、onMouseDown および onMouseUp イベントハンドラーは発火しません。

<Slider.Root
  onMouseDown={() => console.log('onMouseDown')}
  onMouseUp={() => console.log('onMouseUp')}
>
  …
</Slider.Root>

代わりにポインターイベント (例: onPointerDown、onPointerUp) を使用することをお勧めします。上記の制限に関係なく、これらのイベントは、すべてのポインター入力タイプ (マウス、タッチ、ペンなど) で発火するため、クロスプラットフォーム/デバイスの処理に適しています。

前へSeparator

次へSwitch

GitHub でこのページを編集する

概要

ガイド

コンポーネント

ユーティリティ

スライダー

機能

使用法

実装