BLOG

24年新卒 WEBデザイナー募集中 中途 WEBデザイナー募集中 24年新卒 WEBエンジニア募集中

jQueryプラグイン「noUiSlider」を使って上限・下限を設定できるレンジスライダーを簡単に実装【デモ付き】

更新日:2022/08/10


ECサイトなどで価格の範囲を決めて商品を検索する機能があるとき、音量の調整や明るさの調整をするUIのようなデザインで作成されていることがありますね。
このような入力欄を「レンジスライダー」といいます。

レンジスライダーの実装には、input要素のtype属性「range」を利用することができます。
しかしそれだとハンドルが1つしかないため、「商品の最小価格・最大価格を決めて検索する」といった仕様には対応できません。
そこで、ハンドルが2つあるレンジスライダーでも簡単に実装できる、jQueryプラグイン「noUiSlider」をご紹介したいと思います。

本記事では、最小値・最大値をハンドルでもテキスト入力でも指定可能なレンジスライダーの作り方を解説します。
jQueryプラグイン「noUiSlider」のデモ

jQueryプラグイン「noUiSlider」とは

noUiSliderは、jQueryをベースとしUI系の機能をまとめた「jQuery UI」から、レンジスライダー機能だけを取り出したようなスライダ―プラグインです。
範囲指定を自由かつ簡単に指定できるスライダーを実装出来ます。
特徴として、以下の2つが挙げられます。

  • 多機能なのに軽い

  • レスポンシブデザイン対応

レンジスライダーを実装するだけなのに、入れただけで重くなってしまうのはいやですよね。
ですが、noUiSliderは多くの機能を持ちながら軽いので安心して使えます。
またレスポンシブも対応されています。
スマホ用に特別な記述をしなくても、スマホでもきちんと調整されているので手間が省けます。

jQueryプラグイン「noUiSlider」

この記事で実装するレンジスライダーのデモ

今回のカスタマイズ内容は、以下になります。

  • 最小値・最大値をテキストで表示するようにする

  • 入力した最小値・最大値をスライダーに反映させる

最小値・最大値をテキストではなく、インプット要素にしているのは2つ目のカスタマイズ内容に必要になってくるからです。
テキストでは数値を入力することが出来ないので、インプット要素で作成します。

jQueryプラグイン「noUiSlider」のデモ

今回の記事は、こちらの記事をベースにさせて頂き汎用的に使えるよう変更を加えました。
noUiSliderで最小値以下、最大値以上の場合にテキストフィールドの値を空にする

HTMLファイルの準備

今回は、ハンドルで選択した最小値・最大値の数値をinputに出力も出来るレンジスライダーを作成します。

HTMLの記述は以下になります。
レンジスライダー部分になる枠と数値を入力するinputを作成します。

HTMLを作った後

HTMLを作った直後はまだインプット要素しか表示されません。

jQueryファイルの準備

まずは公式サイトから、noUiSliderをダウンロードします。
「Download noUiSlider」をクリックするとダウンロードの説明ページに飛びます。
ページ下部にある「Download noUiSlider from Github」を押して頂いて、ダウンロードページに行くのでソースコードをダウンロードしてください。

jQueryプラグイン「noUiSlider」

ダウンロードが完了したら、以下のファイルをそれぞれCSSフォルダ・JSフォルダに入れ、読み込みます。
・distファイル > nouislider.min.css
・distファイル > nouislider.min.js
・documentationファイル > assetsファイル > wNumb.js
それぞれ、style.css・common.jsの前に記述してください。

noUiSlider実装の準備ができたら、実際にレンジスライダーを実装する記述を書いていきます。
内容は以下になります。

ソースの表示

noUiSliderのjsを読み込んだ後

jQueryをあてたことで、レンジスライダーが表示されます。
デフォルトでも十分に使えるCSSが当たっています。

変数の宣言

それでは、順番にソースの内容をご紹介していきます。
まず変数を宣言します。

スライダ―部分にするボックスを宣言します。
これが無いとレンジスライダーが実装出来ないので、必ず宣言します。

最小値と最大値のテキストフィールドを宣言します。
レンジスライダーで選択した数値を入れ込むのに必要になります。

レンジスライダーの最小値と最大値を指定します。
今回の場合は、0~1,000の間のスライダーを作成するので、最小値に0、最大値に1,000を指定します。
変数gapは、スライダーの数値を100毎に選択させるために必要です。今回は100、200、300と選択するようにします。
端数(101など)を自由に決めたいときは、こちらは不要なので削除してください。

noUiSliderをセット

それぞれの記述の意味は以下になります。

start ハンドルの初期位置を指定する。
ハンドルを複数設定する場合は、[100,500]などと括弧で囲む必要がある。
connect ハンドル間の色の付け方を変更する。初期値はfales。
step ハンドルが一度で動く数を指定する。
range スライダーの最小値・最大値を指定する。
pips スライダーに目盛りを付けるための設定をする。
mode 指定した内容で大きな目盛りの付き方が変わる。
density rangeで指定した範囲の何%ごとに小さな目盛りを振るか指定(デフォルトは1)。

今回、modeにはstepsを指定しましたが他にも以下のような種類があります。

steps stepで指定した数ごとに目盛りを付ける。
positions valuesで指定した%ごとに目盛りを付ける。
例)values: [0, 25, 50, 75, 100]
count valuesで指定した数を元に均等に目盛りを付ける。
例)values: 6
values valuesで指定した固定数で目盛りを付ける。
例)values: [50, 552, 4651, 4952, 5000, 7080, 9000]

注意点として、positionsとcountは明確な固定数値で目盛りを付けないので、スライダーに指定している最小値・最大値によっては目盛りに端数が生まれることがあります。
なので、この2つには「stepped: true」を記載すべきです。

stepped trueと付けることで端数が生まれた数値をそれに近い整数に調整してくれる
例)1813 ⇒ 2000

noUiSliderのイベントをセット

レンジスライダーで指定した数値を、テキストボックスに入力する記述になります。
最大値のハンドルが動いた時は、$maxのvalueに数値を入れ込み、
最小値のハンドルが動いた時は、$minのvalueに数値を入れ込みます。

CSSで調整した後

CSSで以下のデザイン調整を行いました。

  • ハンドルを丸い形に変更・2本の線を非表示

  • 最小値・最大値間の色をグラデーションに変更

ソースの表示

こちらで完成になります。
jQueryプラグイン「noUiSlider」のデモ

応用:ハンドルを4つにし、最小値・最大値の範囲をそれぞれ指定する

最小値・最大値を指定できるレンジスライダーを紹介しました。
左が最小値、右が最大値といったスライダーを作成致しましたが、少しアレンジするだけで違うスライダーを作ることが可能です。

次は応用編として、ハンドルを4に増やし、最小値の範囲と最大値の範囲をそれぞれ指定できるスライダーをご紹介したいと思います。
jQueryプラグイン「noUiSlider」のデモ

今回調整した記述

全体のソースはこちらです。

ソースの表示(HTML)

ソースの表示(jQuery)

HTMLとjsそれぞれ、調整した部分は以下になります。

HTMLファイル

最小値の範囲用と最大値の範囲用のインプット要素を2つ用意します。

jsファイル

まず、増やしたインプット要素の変数を宣言し、「ハンドルの数」と「ハンドル間の色の付け方」を変更します。

ハンドルをスライダーの最小値・400・600・最大値の位置に追加します。
最小値・400が最小値の範囲になり、600・最大値が最大値の範囲になります。
色はそれぞれの間につくように設定致しました。

次に、実際にスライダーの数値をそれぞれのインプット要素に追加する記述になります。

まずそれぞれのインプット要素の変数を宣言します。
その次に「slider_values」でハンドルのインデックス番号を選択できるようにします。
先程宣言したそれぞれのインプット要素のvalueに入力されるように「.value」を指定し、変数slider_valuesの該当するインデックス番号を指定します。

インデックス番号は0から始まるので、最小値の範囲の最小値がslider_values[0]になり、最小値の範囲の最大値にslider_values[1]が入ります。
最大値の範囲にも同じように設定すれば完了です。

また、入力した数値でスライダーを動かす記述も増やします。

「.set([null, null, null, this.value])」の位置が重要になります。
今回は4つのハンドルがあるので、setの中身の4つ必要になってきます。
「this.value」と指定した位置によって、インプット要素と連携させるハンドルが変わります。
最小値の範囲の最小値なら並びは「this.value, null, null, null」になります。
最大値の範囲の最大値なら並びは「null, null, null, this.value」になります。

これだけで4つのハンドルのスライダーの完成です。

まとめ

如何でしたでしょうか?
インプット要素に標準であるレンジスライダーだけではなく、noUiSliderを使えば難しそうに見えるレンジスライダーも簡単に実装することが可能になります。
今回ご紹介したのは、ハンドルが2つある最小値・最大値をテキスト入力でも指定可能なスライダーでしたが他にも様々なアレンジも可能なので、一つでも知っておくとデザインの幅が広がると思います。

noUiSliderのサイトでも様々なアレンジ方法をご紹介しているのでぜひ参考に見てみてください。
jQueryプラグイン「noUiSlider」

少しでも、見て頂いた方の助けになれば幸いです。

参考サイト

jQueryプラグイン「noUiSlider」
noUiSliderで最小値以下、最大値以上の場合にテキストフィールドの値を空にする

FOLLOW US