web-dev-qa-db-ja.com

分割点を定義するのに適した複数のハンドルを持つスライダーです

私はウェブアプリに取り組んでいます。次に、値の範囲をいくつかの連続する部分に分割する必要があります。たとえば、0〜100を4つの部分(0〜20、20〜40、40〜60、60〜100)に分割します。

最も簡単な方法では、分割ポイントの値にテキスト入力を使用できます。上記の例では、値は20、40、60になります。ただし、入力値を検証する必要があり、いくつかの入力があると直感的ではないようです。

だから私はこのような複数のハンドルを持つスライダーを好みます: enter image description here

もっと便利で直感的だと思います。

私が見る限り、1つまたは2つのハンドルを持つスライダーが一般的ですが、より多くのハンドルを持つスライダーは非常にまれです。そのようなスライダーが適しているかどうか、またはより良い代替案はありますか?

2
jddxf

スライダーの出力は、一連のテキスト入力よりも範囲間の違いを示します。しかし、私はマルチレンジスライダーを数回使用しており、テキストフィールドを「入力」として使用する必要がある場合に、人々がテキストフィールドを要求しました。これがなぜそうなのかについて私が得た苦情の簡単なサンプルは次のとおりです:-):

a)オーバーラップするハンドル間で選択するのが難しい(特にタッチの場合、特にオーバーラップに2つ以上のハンドルがある場合)

b)ハンドルの追加/削除も同じシナリオでは難しい

c)正確な値にハンドルを配置するのは面倒です

Shneidermanが「動的クエリ」と呼んでいたものに対して、入力側のスライダーは一般に適しています- http://drum.lib.umd.edu/bitstream/handle/1903/388/CS-TR-3022.pdf -スライダーの値をインタラクティブに変更し、すぐに別の変数への影響を確認します-通常は視覚的に。これがあなたのユースケースでない場合は、テキストフィールドに戻って、範囲を表示するための個別の視覚的表現(基本的に、値の積み重ねられた水平100%棒グラフ)を用意する価値があるかもしれません。

3
mgraham

おそらく、スライダーポイントとテキスト入力のハイブリッドで、一方を変更するともう一方も自動的に変更されますか?

このように、いくつかの利点があります。

  • 編集フィールドに入力している場合は、精度が得られ、スライダーポイントに視覚的な表現が表示されます。
  • スライダーポイントをドラッグしている場合は、編集フィールドの値が変化することがわかります。これにより、ドラッグ中に精度を上げることができます。
  • モバイルユーザーはどちらでも使用できますが、精度が必要な場合は、編集フィールドを使用する方が簡単です。
3
SteveD