意味と単位を教えてください
正確な入力が必要な場合は、単にドラッグするのではなく、追加のナンバー ボックスが必要です。
スライダー デザインシステム
制御された値または値の範囲を選択するのに役立ちます。
チェックリストの内容
確認の進捗
01
構造と意味
使用状況に応じて情報とプレゼンテーションを比較します。
02
インタラクションとユーザビリティ
操作を試し、ステータスを変更して作業を続行します。
進捗はこのブラウザーに自動保存されます。
ガイド
確認方法
使用例
使用例
意味と単位を教えてください
「予算、千ドン」: 範囲 0 ～ 500、現在選択されている値 250。
バリエーションと利用場面
バーとプル
明るい背景でも暗い背景でもトラック、選択したセクション、ハンドルを見つけやすくします。
最低値と最高値を試してください。ハンドルの端はカットされていません。
例 音量バーには、明確なノブとパーセント単位のラベルが付いています。
ラベルと制限
ドラッグする前に、値の意味、単位、最小/最大マークを指定します。
現在値の読み取り専用。それが価格、距離、容量のいずれであるかを理解する必要があります。
例 距離フィルターには「半径 5 km 以内」と表示されます。
050100
プルハンドルで操作
ドラッグ、矢印キー、および適切な制限までの移動キーをサポートします。
キーボードは正しい値を選択する場合にのみ使用してください。増加または減少のステップは一貫している必要があります。
例 矢印は毎回 1% ずつ増加します。ホームは 0% に設定されています。
ドラッグの代わりに数値を入力できるようにしてください。
ドラッグ位置の値
ハンドルの近くに値を表示する場合は、ハンドルを表示したままにし、アクティブな項目を覆わないようにしてください。
モバイルの上端までドラッグします。値ラベルはビューポートを超えて拡張されません。
例 「75%」のバブルはプル ハンドルの上にあり、右端にまだ表示されています。
数字を正しく入力する方法
必要なデータに対してドラッグの精度が十分でない場合は、入力ボックスを追加します。
制限外の数値を入力し、修正してください。スライダーと入力ボックスは同じ有効な値でなければなりません。
例 最高価格を正しいマークにドラッグする代わりに、「250000」と入力できます。