web-dev-qa-db-ja.com

スライダーで入力と出力の両方を表示するにはどうすればよいですか?

私は可変輝度LEDを制御するためのインターフェースに取り組んでいます。私にとって明らかな選択は、スライダーのようなものを使用することです。 LEDはGUI内または外部で調整できるため、ユーザーが設定を変更できるようにし、現在の設定も表示できるようにする必要があるため、スライダーはその点では理想的ではないようです。

スライダー形式で入力と出力を同時に表示するために使用されているいくつかのアプローチは何ですか?この問題に取り組む良い方法は何でしょうか?

1
Brian

これは彼らのための教科書事件だと思う<output要素はhtml5で実装されました。ノブとしてスタイル設定されたいくつかの例を見ました。これは、ディスプレイの入力と出力の両方を示しています。ノブの1つの位置にマーキングがあり、ユーザーが常に入力している場所を示しています。ダイヤルをオンにすると、ハードウェアに組み込まれているアイコン間で変化するライトとシェーディング(通常)の形で、現在選択されているボリュームを照らすために出力要素が使用されます。
バニラの使用例<input type="range" />および<output>タンデムは、ノブの例の小さいバージョンです。
スタイル<input type="range" />をノブに挿入し、Eoutput>要素をデジタルディスプレイとして表示し、ユーザー入力ごとに動的に更新します。

参照:
demosthenes.info/blog/757/Playing-With-The-HTML5-range-Slider-Input

2
albert