ティックなしでスライダーのステップを視覚化する方法

Question

スライダーが実行できるステップを視覚化する良い方法は、次のようにティックで視覚化することです。

ティックを使用せずに特定のステップにのみ設定できるスライダーを視覚化する良い方法は何ですか？

実際の例：

2つのスライダーを取得しました。両方とも0〜300の範囲です。上のスライダーは30秒（11ステップ）のステップでのみ設定できます。下の方にはこの制限がなく、0から300（301ステップ）の間で設定できます。

Answer 1

一般に、スライダーは正確な値が相対よりも重要でない場合にのみ、より良いユーザーエクスペリエンスを提供します値。

古典的な例は、スライダーのつまみがa little bit of sound、all the way up、no soundなどの値に調整されると音量が増減するボリュームコントロールです。

---

一般的な相対値があなたの状況で問題なければ、おそらくあなたはこの質問をするつもりはないでしょう。そのため、有効な量であることを確認する簡単な方法でユーザーが任意の値を入力できるソリューションを検討してください...

任意のステップの数値入力のデモ

1. 予想される入力は前もって明確でなければなりません

2. 「210」と入力するか、210リンクをクリックするだけでも同じ結果になります

3. 無効な入力は防止されませんが、有効な入力は常に1回クリックするだけです

Answer 2

動的なツールチップを使用して、コントロールの特異性を視覚化し、スライダーコントロールのフィードバックを表示することができます。図を参照してください。

ツールチップ内に固定点があるスケールがあります。左と右の次は、エッジに近い透明なポイントを示し、ドットはスケールの連続性を示します。必要に応じて、「主な」目盛りをスライダーに表示でき、効果は物理的な「マイクロメーター」ツールに似ています。

Answer 3

アニメーションを使用して目盛りを表すことができます。顕著な「イーズインアウト」タイプの加速/減速曲線を想像してみてください。スライダーコントロールは、目盛りの位置に近づくにつれて遅くなり、目盛りから離れるにつれて速くなります。これは、物理的なノッチスライダーで発生する可能性のある物理的な摩擦の構築を模倣します。

摩擦を模倣することは、マウスユーザーよりもタッチデバイスの方が効果的だと思います。 Alexyが提案するようなフライアウトと組み合わせて使用​​できます。

例として アニメーションのマテリアルデザインガイドライン をご覧ください。 CodepenのユーザーAna Tudorにもいくつかの 素敵な例 があります。