javascript - JavaScriptを使用したスライダー

Question

以下のように数値スライドを作成する方法; HTML5 と jquery ライブラリを使用せずに

Answer 1

dhtmlxSliderを試しましたか? シンプルな Javascript と HTML 4.01 strict を使用したスライドバーです。

ほとんどのブラウザーと互換性があり、このリンクから無料でダウンロードできると思います: dhtmlxSlider のダウンロード リンク

dhtmlxSlider を使用するコードの例を次に示します。

<script type="text/javascript"> 
var slider1;
function doLoadLiveDemo(){
slider1=new dhtmlxSlider(
   "sliderBox1",
   260,
   "dhx_skyblue");

slider1.setImagePath("codebase/imgs/");
slider1.setStep(50);
slider1.attachEvent(
"onChange",
function(nv){document.getElementById("qual").value=nv;});
slider1.init(); 
</script>

Answer 2

jQuery UI の Range Slider を使用できます。

<script>
$(function() {
    $( "#slider-range" ).slider({
        range: true,
        min: 0,
        max: 500,
        values: [ 75, 300 ],
        slide: function( event, ui ) {
            $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
        }
    });
    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
        " - $" + $( "#slider-range" ).slider( "values", 1 ) );
});

ここでデモページをチェックしてください: http://jqueryui.com/demos/slider/range.html