今日の人気記事

  1. 指定した要素を上下左右にスクロール「Marquee」
  2. 数値範囲をマウスで指定 - レスポンシブ・レンジスライダー「noUiSlider」
  3. 入力した文字数/最大文字数をカウント「BootStrap Maxlength」
  4. 画像の拡大・縮小と移動(パン)「pan and zoom 」
  5. 2つのハンドルを設置できるスライダー「Dolly.js」

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

スポンサーリンク

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

jQueryプラグイン「Spunky Slider」

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

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

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

スポンサーリンク

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

「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>
スポンサーリンク

関連記事(一部広告含む)