更改jQuery UI的时间滑块间隔小时，并添加蜱

我一直在寻找一个简单的jQuery时间滑块与我的谷歌整合地图第3 webmap，我发现这个代码的完美工作：更改jQuery UI的时间滑块间隔小时，并添加蜱

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <style> 
     .ui-slider-range { 
      background: rgb(255, 130, 37); 
     } 
    </style> 


    <script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
    <script> 
     $(function() { 
      function pad(num, size) { 
       var s = num + ""; 
       while (s.length < size) s = "0" + s; 
       return s; 
      } 
      var formatSecs = function (totalsecs) { 
       var hour = parseInt(totalsecs/3600, 10) % 24; 
       var min = parseInt(totalsecs/60, 10) % 60; 
       var secs = totalsecs % 60; 

       return pad(hour, 2) + ":" + pad(min, 2) + ":" + pad(secs, 2); 
      }; 

      $("#slider-range").slider({ 
       range: true, 
       min: 0, 
       max: 86400, 
       values: [7200, 72000], 
       slide: function (event, ui) { 
        var min = ui.values[0]; 
        var max = ui.values[1]; 

        $("#amount").val(formatSecs(min) + " - " + formatSecs(max)); 
       } 
      }); 

      $("#amount").val(formatSecs($("#slider-range").slider("values", 0)) + " - " + formatSecs($("#slider-range").slider("values", 1))); 

     }); 
    </script> 


</head> 

<body> 
    <p> 
     <label for="amount">Time range:</label> 
     <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;"> 
    </p> 

    <div id="slider-range"></div> 
</body> 

</body> 
</html>

但唯一的问题是切换在秒间隔内移动。我只是希望它能够以小时为单位移动，所以它不那么流畅，或者如果过渡不能改变，我想在底部添加刻度，就像这个link中用户“pliablepixels”所示的例子，所以在用户至少可以测量下一个小时他们可以将滑块拉到哪里。

来源

2015-11-20 J. Doe

您可以使用滑块的step财产，像这样：

$("#slider-range").slider({ 
    range: true, 
    min: 0, 
    max: 86400, 
    values: [7200, 72000], 
    step: 3600, 
    slide: function (event, ui) { 
     var min = ui.values[0]; 
     var max = ui.values[1]; 

     $("#amount").val(formatSecs(min) + " - " + formatSecs(max)); 
    } 
});

通知的step: 3600,，这将1小时的步骤递增的时间。

3600（一小时内秒数）已被使用，因为您的整个范围也以秒为单位。

Here is the JSFiddle demo

您还可以添加以下代码变化范围时，平滑的运动：

$(".ui-slider-range, .ui-slider-handle").css("transition", "all 0.4s");

Here is the updated code

来源

2015-11-20 07:43:22

真聪明。谢谢！ – Greenmachine

更改jQuery UI的时间滑块间隔小时，并添加蜱

回答

相关问题