HTMLとCSSのみを使用して範囲値を表示するにはどうすればよいですか?

HTML5 入力タイプ range を使用した範囲値の表示

範囲スライダーを使用して Web サイトを作成すると、値を調整する便利な方法が提供されます。ただし、参照しやすくするために、現在のスライドの値をテキスト ボックスに表示すると便利な場合があります。 jQuery は簡単なソリューションを提供しますが、HTML と CSS のみを使用してこの機能を実現することも可能です。

解決策:

JavaScript を使用せずに現在の範囲値を簡単に表示するには、次の HTML コードを実装します:

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

この中でコード:

• 要素は、値、最小値、最大値の属性を持つ範囲スライダーを定義します。
• oninput イベント リスナーは、範囲スライダーが調整されるたびに、隣接する兄弟出力要素の値を更新します。
• 要素は現在の範囲値を表示します。

このメソッドを使用すると、外部スクリプトを使用せずにテキストボックスに範囲値を簡単に表示できます。

以上がHTMLとCSSのみを使用して範囲値を表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。