JavaScriptでカスタムレンジスライダーを作ろう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

今回は、フィードバック機能を実装します。

demoは「こちら」で確認できます。

環境構築

簡単な環境構築をお願いします。

必要なファイルは、以下の通りです。

ページ(HTML)の作成

最初にページを作成しましょう。

このHTMLをブラウザ上で表示すると以下のようになります。

スタイル(CSS)を装飾

次は、ページにスタイルをつけます。

ここまで実装すると以下のようになります。

JavaScriptの実装

準備は整ったので、JavaScriptを実装していきましょう。

要素を取得する

最初に、画面操作に必要な要素を取得します。

inputイベントの登録

レンジスライダーは、input要素で作成しています。すなわち、このスライダーの状態が変化したらinputイベントが発火します。

ラベルの更新

レンジスライダーを動かした時に、ラベルが更新されるようにしましょう。

JavaScript では、「+」をつけるとstring->number型に変化できます。ただし、数値に変換できるものだけです。

ラベル位置の調整

レンジスライダーを動かしたら、それに付随してラベル位置も調整しましょう。

getComputedStylegetPropertyValueは、人生で初めて使いましたw

これで、レンジスライダーやラベルに設定されているwidthをpx付きで取得しています。

ラベルの位置調整は、スタイルの「left」プロパティで設定しているので、「label.style.left 」に計算済みの値を代入すると、レンジスライダーに付随して、ラベルも動くようになります。

肝心の計算方法は結構複雑なので、時間に余裕がある方は解き明かしてみてください。

これで完成です。

おわりに

今回のようにレンジスライダーの動きに連動して、ラベルを動かす処理を実装したことはなかったのですが、結構面白いですよね。JavaScriptとCSSの連携が肝になりますが。。

それでは、また!

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍


コメントを残す