JavaScriptでスライダーバーを実装する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでスライダーバーを実装する方法について現役エンジニアが解説しています。スライダーバーとは、値をスライドさせることでメーターなど変化する部品のことです。HTMLのinputタグのtypeのrangeやJavaScriptのライブラリのnouisliderを使う方法を解説します。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

JavaScriptでスライダーバーを実装する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでスライダーバーを実装する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

スライダーバーとは

下記のような値をスライドさせることで変化させる部品のことです。

つまみのような場所を左右や上下に移動させることで値を変化させることができます。音量や画面の明るさのような値を調整する際の入力欄として操作しやすい部品です。

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

スライダーバーを実装する方法

シンプルにスライダーバーを実装するのであれば、HTMLのinputタグのtypeをrangeとすることが簡単です。

その場合は下記のようなHTMLソースを記述するだけでスライダーバーが実装できます。これにメモリをつけたり、値を10づつ変化するようにしたり、CSSで装飾したりすることもできます。

<input type="range">

また、複数の値を1つのスライダーバーで操作したいような場合などinputタグでは対応できない場合は、JavaScriptのスライダーバーのライブラリを使って実装することになります。

実際に書いてみよう

HTMLのinputタグを使う方法は上で紹介した通りです。ここでは、JavaScriptのライブラリを使って実装する流れと方法を紹介します。

1.ライブラリを探す

欲しい機能名やライブラリというキーワードで検索しても良いです。今回はJavaScriptのライブラリを探すのに便利なサイトのSearchLibsでスライダーバーのライブラリを探します。

検索キーワードはsliderだけだと画像をスライド表示するライブラリも出てくるので、sliderにスライダーバーを表すrangeという単語を追加します。

検索結果から一番スターの多い「nouislider」というライブラリを使うことにします。

2.ライブラリを読み込む

ライブラリをダウンロードして読み込んでも良いです。

今回は手っ取り早く読み込めるJavaScriptのライブラリなどを配信しているCDN(Content Delivery Network)のcdnjsから「nouislider」を検索して配信しているURLを使って読み込みます。

使用するCSSとJSファイルの2つを下記のようなURLで読み込んでください。

https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.6.0/nouislider.min.css
https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.6.0/nouislider.min.js

3.ライブラリの実装をする

ライブラリのドキュメントを読み実装方法を確認します。今回は少ない記述で最小の実装をしてみます。

まずはHTMLでスライダーバーを用意するためのタグを用意します。JavaScriptで取得しやすいようにidにsliderという名前をつけています。

<div id="slider"></div>

次にJavaScriptの記述です。

noUiSliderのcreateメソッドに必要な値を渡します。第1引数に、スライダーバーを表示するためのHTMLを取得して渡します。第2引数に、{(波カッコ)で囲ったオブジェクトの形で、必須のstartとrangeを指定します。startは操作するハンドルの数と初期位置を指定するためのものです。

今回はハンドルを2つにし、20の位置と80の位置にします。rangeはオブジェクトの形で最小値であるminと最大値であるmaxを指定します。

let slider = document.getElementById('slider');

noUiSlider.create(slider, {
  start: [20, 80],
  range: {
    'min': 0,
    'max': 100
  }
});

これで下記のようなハンドルが2つあるスライダーバーができました。

まとめ

HTMLで簡単にスライダーバーを実装する方法と、JavaScriptのライブラリを使ったスライダーバーの実装方法を紹介しました。

全て自作するのも勉強のためには良いですが、素早くやりたいことを実現する方法として、すでにあるライブラリを利用する流れも知っておくのもおすすめです。

筆者プロフィール

横山茂雄(よこやましげお)

フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。