数値入力スライダー「jQuery Simple Slider」

「jQuery Simple Slider」はスライダーを使用して数値設定が行えるようにしてくれるjQueryプラグインです。"Unobtrusive Numerical Slider"とあるように余計なものが削ぎ落とされてシンプルにつくられています。
ダウンロード | デモ

スクリプト

<link href= "css/simple-slider.css" type="text/css" rel="stylesheet">
<script src="jquery.min.js" type="text/javascript"></script>
<script src="js/simple-slider.min.js" type="text/javascript"></script>

実装

<input type="text" data-slider="true">

<script type="text/javascript">
$("[data-slider]")
.each(function() {
    var input = $(this);
    $("<span>")
    .addClass("output")
    .insertAfter($(this));
})
.bind("slider:ready slider:changed", function( event, data) {
    $(this)
    .nextAll(".output:first")
    .html(data.value.toFixed(3));  // 数値表示の小数点以下数
}); 
</script>

設定

data-slider-range　設定数値の範囲
data-slider-step　設定数値の刻み
その他設定

Related

ECサイトの商品表示に使えそうなスライダー「Simple Multi-Item Slider」 テキストボックスの入力値を数値限定にしてくれる「jQuery - numeric」 クレジットカード番号のバリデーションとカード会社を特定してくれる「jQuery Credit Card Validator」 シンプルな画像スライダー/ギャラリー用プラグイン 入力数値の桁区切り挿入 日付入力に便利な「Datepicker for Bootstrap」 時刻入力に便利な「Timepicker for Bootstrap」 数値入力に便利なステッパーを実装「Numeric Stepper」