JavaScript を使用せずにテキストボックスにレンジ スライダー値を表示するにはどうすればよいですか?

JavaScript を使用せずにテキストボックスにレンジ スライダー値を表示する

レンジ スライダーを利用した Web サイトの作成において、現在のスライド値を表示する機能テキストボックスに追加することは価値のあるものになる可能性があります。これは単純なタスクのように見えますが、JavaScript や jQuery に頼ることなく実現できます。

これを実現するには、HTML5 入力型の範囲とその oninput イベント リスナーを活用できます。 oninput イベントを範囲入力に割り当てることで、隣接する出力要素の値を操作し、目的の動作を効果的に複製できます。

次のコード スニペットを考えてみましょう。

<input type="range" value="24" min="1" max="100" oninput="this.nextElementSibling.value = this.value">
<output>24</output>

この例では、たとえば、oninput イベント ハンドラーは、範囲入力の直後にある出力要素のテキスト値を、範囲スライダーの現在の値と一致するように設定します。スライダーを調整すると、表示される値がリアルタイムで更新され、従来 JavaScript または jQuery を通じて実現されていた機能が反映されます。

以上がJavaScript を使用せずにテキストボックスにレンジ スライダー値を表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。