select - option要素をスライダーで使いやすく「Spunky Slider」

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

jQuery Plugin » フォーム » select - option要素をスライダーで使いやすく「Spunky Slider」

select - option要素からスライダーにしてくれるプラグイン「Spunky Slider」を紹介します。

jQueryプラグイン「Spunky Slider」

このプラグインを使えば、フォームの選択項目（select - option要素）からスライダーを実装することができます。

スライダーにすることで、選択している項目を数値だけではなく位置をして把握できるので選択（入力）ミスを減らし、ユーザーの使い勝手もアップしますね。

スライダーは横（水平）、縦（垂直）のどちらにも対応しており、レンジのステップ幅や最小値・最大値などの数値も制御することがｄけいます。

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

「Spunky Slider」のデモ

デモのソース（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>

Spunky Slider

jQueryプラグイン「Spunky Slider」

デモのソース（HTML + jQuery）

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