トピックス

フォームのinput、select、textareaにはそれぞれブラウザによってデフォルトの見た目があり、それぞれ異なる見た目をしています。そのため近年のWEBデザインではフォームのパーツはオリジナルデザインで見た目をカスタマイズしているサイトがほとんどです。

その中でもinput要素のtype属性のひとつrangeを使ったレンジスライダーの見た目のカスタマイズが意外と難しかったります。そこで今回はレンジスライダーを簡単にカスタマイズできる方法をご紹介したいと思います。

cssのみでカスタマイズという方法も調べるといくつかあるのですが、使用感なども考慮すると「noUiSlider」というjsプラグインの導入がおすすめです。jsプラグインなのでjQueryなしで動かせます。

デフォルトの表示確認

「noUiSlider」のレンジスライダーではなく、まずはデフォルトの見た目・使用感を先に確かめてみましょう。

デフォルトのものはシンプルな見た目ですが、レンジスライダーではこちらをもっと見栄えよくすることができます。

デモ

どのような見た目・使用感かは下記のデモをご確認ください。

まず簡単に実装するならばこのような見た目です。これだけでは値が何なのかもわからないため、ここからオプションを利用するなどのカスタマイズが必要です。

どんな見た目・機能があるか確認したい方は公式サイトのデモをご確認ください。
公式サイトではjsとcssの記述も用意されているので今すぐにでも同じ見た目で再現することができます。

ダウンロード方法

「noUiSlider」の公式サイトからご自身に合った方法でダウンロードしてください。

https://refreshless.com/nouislider/

設置するファイル

「noUiSlider」の設定にはダウンロードした中からjsとcssのファイルのふたつのを読み込むだけで使用することができます。

• nouislider.min.css
• nouislider.min.js

サンプル

今回こちらの記事では下記の見た目を作成するサンプルをご紹介します。

今回作成するもの

今回は例として予算に関するレンジスライダーを作成します。下限は0円、上限は10万円で見た目のカスタマイズまで行います。そのサンプルが下記になります。

サンプル：HTML

#sampleRangeの部分はレンジスライダーの表示に必須になります。中には何も記載しないでください。
.range-numに関しては決まりはないので自由に設定が可能です。今回は予算の下限と上限をイメージに、レンジスライダーと連動して、選択した値を出力するためのものを用意しています。

<div id="sampleRange"></div>
<div class="range-num">
  <div class="range-num-input">下限<input type="number" min="0" max="100000" id="sampleMin" value="" readonly>円</div>
  <div class="range-num-between">～</div>
  <div class="range-num-input">上限<input type="number" min="0" max="100000" id="sampleMax" value="" readonly>円</div>
</div>

サンプル：javascript

「noUiSlider」のjavascriptの記述になります。オプションに関しては下記だけでなく他にもありますので、公式を参考に試してみてください。

今回のサンプルでは下記のオプションを利用しています。また、イベントが用意されていますのでレンジスライダーを動かすたびに値を取得して別の場所に下限と上限の数値を連動して表示しています。サンプルではupdateというイベントを利用していますが、他にもいくつかイベントが用意されています。

const sampleRange = document.getElementById('sampleRange');
const sampleMin = document.getElementById('sampleMin');
const sampleMax = document.getElementById('sampleMax');
//レンジスライダーの表示に関わる記述
noUiSlider.create(sampleRange, {
    start: [5000, 30000],
    step: 1000,
    connect: true,
    range: {
        'min': 0,
        'max': 100000
    },
});
//レンジスライダーを動かした際に別のinputに連動して表示させるイベントの記述
sampleRange.noUiSlider.on('update', function( values, handle ) {
	sampleMin.value = Math.trunc(values[0])
	sampleMax.value = Math.trunc(values[1])
});

利用したオプションについて

上記以外にも目盛を付けるオプションなどもありますので、興味のある方はぜひいろいろお試しください。

サンプル：SCSS

下記がレンジスライダーの見た目をカスタマイズするSCSSになります。シンプルな見た目のものを作成するのであれば意外とcssの調整箇所は少なくて済むため手軽に実装が可能です。出力箇所のinputの見た目に関しては今回は割愛させていただきます。

#sampleRange {
	//レンジスライダーの外枠の見た目
	max-width: 500px;
	margin-right: auto;
	margin-left:auto;
	background: #eee;
	border:1px solid #eee;
	border-radius: 1000px;
	height: 20px;
	box-shadow: none;
	.noUi {
		&-connect {
			//ハンドル間の色
			background: #d92027;
		}
		&-handle {
			//ハンドルの見た目
			height: 28px;
			width: 28px;
			border:1px solid #ccc;
			border-radius: 1000px;
			background: #fff;
			top: -5px;
			&:before,
			&:after { content:none; }
		}
	}
}

まとめ

デフォルトのレンジスライダーでは表現できることも限られていますが、「noUiSlider」を使えば見た目もやりたいことも実現可能かもしれません。
input要素のrangeはあまり頻繁に使う機会は少ないかもしれませんが、レンジスライダーを導入する機会があれば、「noUiSlider」を使ってサイトに合った見た目にカスタマイズしてみてください。