select - option要素をスライダーで使いやすく「Spunky Slider」
当ページのリンクには広告が含まれています。
スポンサーリンク
select - option要素からスライダーにしてくれるプラグイン「Spunky Slider」を紹介します。
jQueryプラグイン「Spunky Slider」
このプラグインを使えば、フォームの選択項目（select - option要素）からスライダーを実装することができます。
スライダーにすることで、選択している項目を数値だけではなく位置をして把握できるので選択（入力）ミスを減らし、ユーザーの使い勝手もアップしますね。
スライダーは横（水平）、縦（垂直）のどちらにも対応しており、レンジのステップ幅や最小値・最大値などの数値も制御することがｄけいます。
スポンサーリンク
それではデモページのスライダーを動かしてみてください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Spunky Slider のデモでーす。">
<title>Spunky Slider - jQuery Plugin Demo</title>
<link rel="stylesheet" media="screen" href="css/custom.css">
</head>
<body>
<p><a href="https://webkaru.net/jquery-plugin/spunky-slider/">「jQueryプラグインまとめ」に戻る</a></p>
<h1>Spunky Slider のデモ。</h1>
<p>次のスライドバーを動かしてみてください。</p>
<form id="demo">
<input data-bound-select-id="select" data-orientation="horizontalvertical" value="0" type="range" min="0" max="10">
<select id="select">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/script.js"></script>
<script>
$(document).ready(function() {
$('#demo input').spunkySlider();
});
</script>
</body>
</html>
スポンサーリンク