スライダー
BoardUIのビジュアル言語-ニュートラル・インセット・トラック、ブルー・グラデーション・セレクション、エンボス加工された親指、および正確な値バブルの洗練された範囲入力。 最小/最大選択のための1つの値またはRangeSlider用のスライダーを使用してください。 どちらもアクセス可能な隠し入力、ドラッグ・アクション、キーボード・コントロール、およびReact AriaによるRTLサポートが含まれます。
インストール
CLI または手動でスライダコンポーネントを追加できます。
ダークモード対応：この コンポーネント はBoardUIのセマンティックトークンに合わせて自動で切り替わります。 テーマスイッチの設定.
CLIがコンポーネントのソースと内部の依存ファイルをプロジェクトにコピーし、必要なnpmパッケージをインストールします。
npx boardui@latest add slider共有UIパッケージや独自のインポートエイリアスを使う場合は、 インストールパスの設定 をCLIの実行前に設定してください。コピー＆ペーストの例は、標準のインポートを使います。
最低および最高の範囲
RangeSlider 2つのラベル付きの親指をレンダーします。選択された間隔はそれらの間で満たします、各気泡は厳密な値を示し、親指は交差しません。使用して下さい minValue, maxValue, と step 許容範囲を定義する。
<RangeSlider label="Price range" defaultValue={[200, 800]} minValue={0} maxValue={1000} step={50} formatValue={(value) => currency.format(value)}/>制御された値
利用条件 値 そして、 onChange 生きている管理された状態のため。 onChangeEnd ドラッグ後の火災やキーボード入力が完了すると、すべての動きのアップデートを送信せずに値を保存するのに便利です。
const [volume, setVolume] = useState(40);const [priceRange, setPriceRange] = useState([200, 800]);
<Slider value={volume} onChange={setVolume} />
<RangeSlider value={priceRange} onChange={setPriceRange} onChangeEnd={(range) => saveRange(range)}/>価値の泡および状態
Exact-value バブルはデフォルトで表示されます。 それらをフォーマットします。 formatValue、またはセット showTooltip=false 値が他の場所で現れた場合。 無効なスライダは、入力を防止しながら、値とアクセス可能なラベルを保持します。
<Slider defaultValue={64} />
{/* Hide the exact-value bubble when the surrounding UI shows the value */}<Slider defaultValue={36} showTooltip={false} />
<RangeSlider defaultValue={[20, 70]} isDisabled />