数値入力スライダー「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　設定数値の刻み
その他設定