使用javascript的滑塊

Question

如何創建如下的數字幻燈片;不使用HTML5和jQuery庫

Answer 1

你試過dhtmlxSlider？它的滑動條使用簡單的Javascript和HTML 4.01嚴格。

我相信它與大多數瀏覽器兼容，並可以自由地從這個鏈接點擊這裏下載：Download link for 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的範圍欄：

<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