2つのハンドルを設置できるスライダー「nstslider」

当ページのリンクには広告が含まれています。

jQuery Plugin » フォーム » 2つのハンドルを設置できるスライダー「nstslider」

2つのハンドルを設置できるスライダーを実装するプラグイン「nstslider」を紹介します。

jQueryプラグイン「nstslider」

このプラグインを使えば、簡単にスライダーを実装することができます。

また、ハンドルを両サイドに2つ設置できるので、ひとつのスライダーで2つの値（範囲など）をユーザーに入力させることができます。

それではデモページのスライダーをぐりぐり動かしてみてください。

「nstslider」のデモ

デモのソース（HTML + jQuery）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="nstslider のデモでーす。">
<title>nstslider - jQuery Plugin Demo</title>
<link href="jquery.nstSlider.css" rel="stylesheet" />
</head>
<body>
<p><a href="https://webkaru.net/jquery-plugin/nstslider/">「jQueryプラグインまとめ」に戻る</a></p>
 
<h1>nstslider のデモ。</h1>
 
<div class="nstSlider" data-range_min="0" data-range_max="100" data-cur_min="20" data-cur_max="60">
  <div class="bar"></div>
  <div class="leftGrip"></div>
  <div class="rightGrip"></div>
</div>
<p>左の値 → <span class="leftLabel" /></span>
　　　　　　右の値 → <span class="rightLabel" /></span></p>
 
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="jquery.nstSlider.js"></script>
<script>
$('.nstSlider').nstSlider({
  "left_grip_selector": ".leftGrip",
  "right_grip_selector": ".rightGrip",
  "value_bar_selector": ".bar",
  "value_changed_callback": function(cause, leftValue, rightValue) {
    $('.leftLabel').text(leftValue);
    $('.rightLabel').text(rightValue);
  }
});
</script>
</body>
</html>

jQueryプラグイン「nstslider」

デモのソース（HTML + jQuery）

関連記事（一部広告含む）