2つのハンドルを設置できるスライダー「nstslider」
当ページのリンクには広告が含まれています。
スポンサーリンク
2つのハンドルを設置できるスライダーを実装するプラグイン「nstslider」を紹介します。
jQueryプラグイン「nstslider」
このプラグインを使えば、簡単にスライダーを実装することができます。
また、ハンドルを両サイドに2つ設置できるので、ひとつのスライダーで2つの値（範囲など）をユーザーに入力させることができます。
スポンサーリンク
それではデモページのスライダーをぐりぐり動かしてみてください。
デモのソース（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>
スポンサーリンク