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="http://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>
スポンサーリンク