Slider
水平または垂直トラック上で 1 つの値または順序付き範囲を選択します。
主なプロパティ
| プロパティ | 動作 |
|---|---|
| value | 単一 slider は数値または 1 要素の配列を受け取り、range は順序付き配列と値ごとに index を指定した Thumb を 1 つ使います。 |
| range | min、max、step、minStepsBetweenValues が pointer と keyboard による変更を制限します。 |
| form | name は現在の thumb 値を native hidden input を通してシリアライズします。 |
| 検証 | TRSlider にネイティブの required はありません。ビジネスルールは TRField.Root に置き、TRField.Error を表示して無効なつまみにフォーカスします。 |
slider が密度の高いコントロールサーフェスの一部である場合は uiSize="md" を使います。
インストール
pnpm add @tinyrack/ui長い行はコード領域を横にスクロールして確認できます。
スタイル
@import '@tinyrack/ui/components/slider.css';長い行はコード領域を横にスクロールして確認できます。
インポート
import { TRSlider } from '@tinyrack/ui/components/slider';
import { TRField } from '@tinyrack/ui/components/field';
import { TRForm } from '@tinyrack/ui/components/form';
import { TRButton } from '@tinyrack/ui/components/button';長い行はコード領域を横にスクロールして確認できます。
プレイグラウンド
使用方法
例
無効なスライダー パーマリンク
値を表示しつつ操作や送信を許可しない場合は Root を無効にします。
2 つの thumb の範囲 パーマリンク
Root は Intl.NumberFormat で表示値をフォーマットし、各 Thumb は支援技術に役割を伝える値テキストを提供します。
Field 所有の validation と focus 復元 パーマリンク
60% 未満の値で送信すると、サムへフォーカスが移り、エラーが表示されます。値を上げるとエラーが消えるため、もう一度送信してください。
API
Root、Label、Value、Control、Track、Indicator、Thumb と prop/state type は @tinyrack/ui/components/slider から export されます。Root は 1 つの thumb に scalar number または readonly number array を受け取ります。range には array を使い、各 range Thumb に 0 始まりの index を指定して SSR と hydration が正しい値へ対応できるようにします。
| 目的 | 公開 prop とデフォルト |
|---|---|
| スケール | min={0}、max={100}、step={1}、largeStep={10} がデフォルトです。 |
| レイアウト | `orientation="horizontal" |
| range | minStepsBetweenValues のデフォルトは 0 です。`thumbCollisionBehavior="push" |
| thumb の端 | `thumbAlignment="center" |
| 状態と form | 制御された value または defaultValue、disabled={false}、name、外部 form を受け取ります。 |
Value がレンダリングする Intl.NumberFormat の出力を設定するには Root の format と locale を使います。各 Thumb に簡潔なアクセシブルな名前を付け、書式化した数値に「20 パーセントから開始」のような role の文脈が必要な場合は getAriaValueText(formattedValue, value, index) を使います。値が変わってもテキストが正しい場合だけ固定の aria-valuetext を使います。
onValueChange は pointer と keyboard のリアルタイムな変更を報告します。完了した操作の後に 1 回だけ実行する処理には onValueCommitted を使います。矢印キーは step で変化し、Page Up/Page Down と Shift+Arrow は largeStep を使い、Home/End は境界へ移動します。name はフォーム送信用のネイティブ range input を作り、Thumb の inputRef は focus 復元のため対応する input に到達します。minStepsBetweenValues と thumbCollisionBehavior は range thumb が近づいたり交差したりする方法を定義します。