HTML と CSS のみを使用してテキストボックスにスライダー値を表示するにはどうすればよいですか?

HTML と CSS を使用してテキストボックスにスライダー値を表示する

Web アプリケーションでは、現在の値を同時に表示する必要がある場合があります。対応するテキストボックスの範囲スライダーの。 JavaScript または jQuery が一般的なソリューションですが、外部コードを使用せずにこれを実現することも可能です。

HTML と CSS のみを使用してテキスト ボックスにスライダー値を表示するには、oninput イベントと、入力範囲要素。構文は次のとおりです。

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

この例では、ユーザーがスライダーを調整すると、this.value プロパティは更新された値を返します。 oninput イベント リスナーは、この値を出力要素の value プロパティに割り当てます。これにより、現在のスライダー値がテキストとして表示されます。したがって、スライダーが移動すると、テキスト ボックス内の値が動的に更新され、変更が反映されます。

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