CSS と JavaScript を使用してカスタムレンジスライダーを作成するにはどうすればよいですか?-CSSチュートリアル-php.cn

CSS と JavaScript を使用してカスタムレンジスライダーを作成するにはどうすればよいですか?

WBOY

リリース： 2023-08-25 16:45:07

転載

872 人が閲覧しました

如何使用 CSS 和 JavaScript 创建自定义范围滑块？

Range Slider は、「範囲」タイプを受け入れる HTML の入力フィールドです。これは、指定された特定の範囲内の値を選択するために使用されます。次のコードスニペット

に示すように、入力フィールド内の範囲を渡すことができます。リーリー

上記のスニペットでわかるように、型は範囲と等しく、min="0" および max="100" の値が提供されます。フィールドの範囲になります。

カスタム範囲スライダーは、ニーズに応じてフィールド範囲をカスタマイズするのに役立ちます。

次の記事では、CSS と JavaScript を使用してカスタムレンジスライダーを作成する方法を学びましょう。

言語ごとに個別のファイルを作成しましょう -

oninput() イベントを使用する

oninput イベントは、ユーザーが入力フィールドに値を入力したときにすぐにアクションを実行するために使用される HTML イベントです。このイベントを使用するコードスニペットは次のとおりです -

リーリー

以下は以下のコードの説明です -

HTMLファイル(index.html)

これは HTML ファイルなので、.html 拡張子を付けて保存する必要があります。このファイルでは、カスタム範囲スライダーとなる入力範囲フィールドを作成し、入力フィールド内に範囲を設定します。そして、カスタムレンジスライダー値を表示するために、span タグを作成します。

以下はHTMLコードです

index.html

リーリー

CSSファイル(style.css)

これは、.css 拡張子で作成された CSS ファイルです。 CSS を使用して、HTML ページのスタイルを管理します。

以下は、CSS ファイルと HTML ファイルを接続するコードスニペットです -

リーリー

以下は CSS コードです -

style.css

リーリー

JavaScript ファイル (index.js)

これは .js 拡張子を付けて保存する必要がある JavaScript ファイルです。 JavaScript で、入力範囲の値を取得し、innerHTML 属性を使用してユーザーに表示するプログラムを作成します。

以下は、JavaScript ファイルを HTML ファイルに接続するコードスニペットです -

リーリー

NOTE - HTML、CCS、JavaScript の 3 つの個別のファイルを作成する代わりに、拡張子が .html の HTML ファイルを 1 つだけ作成し、CSS を記述することができます。 body タグの上のタグにコードを記述し、body タグの末尾または head タグ内の <script></script> タグに JavaScript コードを記述します。

以下はJavaScriptプログラムです

index.js

リーリー＃＃＃例＃＃＃

上記のHTML、CSS、JavaScriptを実行します。

リーリー

上記のプログラムでわかるように、HTML、CSS、JavaScript を使用してカスタム範囲スライダーを作成します。

HTML を使用して、ページのコンテンツを作成します。まず、範囲をタイプとして受け入れる入力フィールドを作成し、以下に示すように、入力フィールド内に 1 に等しい最小値と 100 に等しい最大値を渡します。リーリー後で、上記のコードスニペットに示すように

oninput

イベントを作成します。この

oninput イベントは、ユーザーが入力フィールドに値を入力したときに値を計算するために使用されます。次に、以下に示すように、ID によって入力範囲値を取得します。 - リーリー スパンタグを取得し、innerHTML 属性を通じて、以下に示すようにレンジスライダーの値を表示します - リーリー

onclick() イベントを使用する