スライダー

スライダーを使用すると、ユーザーは範囲内で1つ以上の値を選択できます。

インストール

npx nextui-cli@latest add slider

上記のコマンドは個別のインストール専用です。もし@nextui-org/reactがグローバルにインストール済みであれば、この手順はスキップできます。 @nextui-org/react がすでにグローバルにインストールされている場合は、この手順を省略できます。

インポート

使用法

無効化

サイズ

半径

色

縦型スライダー

orientation="vertical" プロパティを使用すると、スライダーの向きを変更できます。

ステップ表示あり

showSteps プロパティを使用すると、各ステップに小さなドットを表示できます。

マーク付き

marks プロパティを使用すると、各ステップにラベルを表示できます。

レンジスライダー

value プロパティまたは defaultValue プロパティに値の配列を渡すと、スライダーはレンジスライダーになります。

塗りつぶしオフセット

fillOffset プロパティを使用すると、塗りつぶしを開始する位置を設定できます。

ツールチップ付き

showTooltip プロパティを使用すると、ユーザーがサムをホバーまたはドラッグしたときに、現在のサムの値を含むツールチップを表示できます。

注意: tooltipProps を Slider コンポーネントに渡すことで、ツールチップのプロパティを変更できます。

アウトライン付き

showOutline プロパティを渡すことで、スライダーのサムに小さなアウトラインを追加できます。

開始 & 終了コンテンツ

スライダーコンポーネントには、スライダーの開始と終了に任意の ReactNode を追加できる startContent プロパティと endContent プロパティが用意されています。

値の書式設定

値はデフォルトでパーセンテージとして書式設定されますが、formatOptions プロパティを使用して別の形式を指定することで変更できます。formatOptions は、Intl.NumberFormat のオプションパラメータと互換性があり、現在のロケールに基づいて適用されます。

注意: ツールチップの値を書式設定するには、tooltipValueFormatOptions プロパティを使用してください。

getValue プロパティを使用して値を書式設定することも可能です。

値の非表示

スライダーの値はデフォルトで表示されますが、hideValue プロパティを渡すことで非表示にできます。

サムの非表示

スライダーのサムはデフォルトで表示されますが、hideThumb プロパティを渡すことで非表示にできます。

制御

value および onChange プロパティを渡すことで、スライダーを制御できます。

ユーザーがサムのドラッグを停止したときにのみスライダーの値を取得したい場合は、onChangeEnd プロパティを使用できます。

制御された範囲

value および onChange プロパティで値の配列を使用することにより、範囲スライダーを制御することもできます。

カスタムサム

Slider コンポーネントは、サムを自由にカスタマイズできる renderThumb プロパティを提供します。

カスタム範囲サム

範囲スライダーのサムをカスタマイズするために renderThumb プロパティを使用することもできます。index プロパティは、レンダリングされているサムを示します。

カスタムラベル

Slider コンポーネントは、ラベルを自由にカスタマイズできる renderLabel プロパティを提供します。

カスタム値

Slider コンポーネントは、値ラベル要素をカスタマイズできる renderValue プロパティを提供します。

サムスケールの無効化

サムスケールアニメーションを無効にしたい場合は、disableThumbScale プロパティを渡すことができます。

スロット

• base: すべてのスロットと要素を包含する基本スロット。プライマリコンテナとして機能します。
• labelWrapper: スライダーのラベルと値のコンテナ。これらの要素を整列させ、一貫したレイアウトを確保します。
• label: スライダーのラベルを表示するための専用スロット。
• value: スライダーの現在の値を表示します。labelWrapper 内に配置されます。
• step: スライダー上の個々のステップまたは間隔を表します。
• mark: スライダーに沿った特定の値または間隔を示します。
• trackWrapper: スライダーのトラックのコンテナで、一貫して整列および配置されるようにします。
• track: サムが移動するスライダーのベースバー。
• filler: 選択された値の視覚的な表現で、開始点から現在のサムの位置までトラックを埋めます。
• thumb: ユーザーがトラックに沿ってドラッグしてスライダーの値を選択するインタラクティブな要素。
• startContent: スライダーの先頭に追加コンテンツまたはアイコン用のスロット。
• endContent: スライダーの末尾に追加のコンテンツやアイコンを配置するためのスロット。

カスタムスタイル

Sliderコンポーネントは、コンポーネントのスロットにカスタムのTailwind CSSクラスを渡すことでカスタマイズできます。

データ属性

Sliderには以下の属性があります

• data-hover: スライダーがホバーされている場合。useHover に基づきます。
• data-orientation: スライダーの向き。orientation プロパティに基づきます。

Thumbs には、renderThumb プロパティによって返される以下の属性があります

• data-dragging: サムがドラッグされている場合。
• data-focus-visible: サムがフォーカスされている場合。useFocusVisible に基づきます。
• data-hover: サムがホバーされている場合。useHover に基づきます。
• data-pressed: サムが押されている場合。usePress に基づきます。

アクセシビリティ

• 1つまたは複数のサムのサポート。
• useMove フックによるマウス、タッチ、キーボードのサポート。
• 複数のサムや複数のスライダーを同時にドラッグするためのマルチタッチサポート。
• トラックを押すと、最も近いサムがその位置に移動します。
• 矢印キーだけでなく、Page Up/Down、Home、Endキーの使用をサポートします。
• 水平および垂直の両方の向きをサポートします。
• 丸め誤差の処理によるカスタムの最小値、最大値、ステップ値のサポート。
• スライダー全体または個々のサムを無効にするサポート。
• ドラッグ中のテキスト選択を防止します。
• ARIAを介してスライダー要素のグループとして支援技術に公開されます。
• スライダーのサムは、タッチスクリーンリーダーをサポートするために非表示のネイティブ入力要素を使用します。
• スライダー全体と個々のサムの両方にラベルを付けるためのサポート。
• <output> 要素を使用して、現在のサム値を表示するためのサポート。
• パーセンテージまたは値としての国際化された数値形式。
• RTLロケールでのミラーリングのサポート。

API

Slider Props

スライダーの関数

スライダーのイベント

型

スライダーの値

export type SliderValue = number | number[];

スライダーステップマーク

export type SliderStepMarks = {
  value: number;
  label: string;
}[];