web-dev-qa-db-ja.com

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

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

Ticks

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

実際の例:

enter image description here

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

5
DennisW

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

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

volume


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

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

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

enter image description here

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

enter image description here

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

enter image description here

3
DaveAlger

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

enter image description here

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

9

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

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

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

0