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() イベントを使用する

onclick()

イベントは、ユーザーが特定のボタンをクリックしたときにアクションを実行するために使用される HTML イベントです。以下は、onclick イベントを使用したコード スニペットです。 リーリー

カスタムレンジスライダーを作成する手順は次のとおりです 以下はHTMLコードです

index.html

リーリー

以下はCSSコードです

style.css

リーリー

以下はJavaScriptプログラムです

index.js

リーリー ＃＃＃例＃＃＃

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

上記のプログラムでは、HTML、CSS、および JavaScript を使用しました。HTML では、タイプを範囲として受け入れる入力フィールドを作成し、HTML ボタン (範囲を計算) を作成してから、表示するスパン ラベルを作成します。範囲値。

CSS ファイルでは、ページのスタイルを管理します。 JavaScript では、ID によって HTML ボタンを取得し、次に示すように onclick イベントを使用します - リーリー 次に、関数内で、ユーザーがボタンをクリックすると、入力範囲を取得し、innerHTML 属性を使用して値を表示します。

以上がCSS と JavaScript を使用してカスタム レンジ スライダーを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。