ミニマルデザインがかっこいい!スマホにも対応したレンジスライダー「Ion.Range Slider」

「Ion.Range Slider」はスマホからのタッチ操作にも対応した、ミニマルデザインがかっこいいレンジスライダーです。

Ion.Range Slider

screenshot268

レンジスライダーはミュージックプレイヤーのコントローラーとしてよく使われます。最近では検索条件として下限、上限を定めるときのUIとして採用されることが増えてきました。例えば転職サイトの検索条件として年収範囲を絞る、SNSの人検索で年齢を絞るなど。テキストボックスやselectタグのUIから取って変わっています。

「Ion.Range Slider」の特徴は、”White Skin”と”Dark Skin”の2種類のスキンが用意されていることです。まずは”White Skin”です。

screenshot269

次に”Dark Skin”。こちらもかっこいいです。

screenshot270

それでは基本的なシングルなレンジスライダーの実装方法をご紹介します。まずはjQuery(1.9以上)含む外部ファイルを読み込みます。今回は”White Skin”を読み込んでいます。

<script src="jquery.min.js"></script>
<script src="ion.rangeSlider.min.js"></script>
<link rel="stylesheet" href="normalize.min.css">
<link rel="stylesheet" href="ion.rangeSlider.css">
<link rel="stylesheet" href="ion.rangeSlider.skinNice.css"><!-- White Skinを読み込んでいます -->

 

HTMLはこのようにマークアップします。

<div id="demo1">
  <input type="text" id="someID" name="rangeName" value="10;100">
</div>

 

CSSでレンジスライダーの横幅を指定します。

#demo1 {
  width: 200px;
}

 

JSは以下の1行だけです。

$("#someID").ionRangeSlider();

 

するとこのように実装することができました。

screenshot272

 

どちらかといえばスマホ向けのUIに向いていますね。ぜひ参考にどうぞ。

 

Home > JavaScript > ミニマルデザインがかっこいい!スマホにも対応したレンジスライダー「Ion.Range Slider」

Return to page top