CSSでカスタムレンジスライダーをスタイリングしよう!

こんにちは。KOUKIです。

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

実装するもの

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

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

ワークスペース

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

JavaScript版

HTML & JavaScript

スタイリング

これからCSSでスタイリングしていきます。項目に出てくるbodyやh2はHTMLの要素です。

また、今回は、ブラウザによってスタイルに影響が出やすいので、Chrome前提で実装を進めていきます。

全体の設定

bodyの設定

h2の設定

range-containerの設定

input[type=”range”]の設定

input[type=”range”] + labelの設定

input[type=”range”]::-webkit-slider-runnable-trackの設定

input[type=”range”]::-webkit-slider-thumbの設定

これで、完成です。

その他ブラウザの設定

ついでに、他のブラウザの設定も記載しておきます。

おわりに

今回は、ブラウザの種類により、スタイリングの切り替えが必要でしたね。

私の場合は、Chrome100%なのであまり気にしていませんでしたが、Webデザインを専業にしている人たちは、このあたりも考慮してデザインしているのでしょうね。大変そうです。

実装するときは、Chrome,Safari, Firefox, IEあたりの主要なブラウザをインストールしておいて、動作確認したほうがいいと思います^^

それでは、また!

CSSまとめ

CSSソースコード

コメントを残す