添加蜱滑块UI

Question

我相当的JavaScript和jQuery。我试图在我的网页上添加一个滑块。这是一个基本的滑块，任何人都可以选择0-100之间的值。我不知道如何标记中间的一些间隔。

这是我的代码至今

<script> 
    $(function() { 
    var temp = 0; 
     $("#slider").slider({ 
      animate: true, 
      value:temp, 
      min: 0, 
      max: 100, 
      step: 1, 
      slide: function(event, ui) { 
       $("#amount").val(ui.value); 
      }, 
      stop: function(event, ui) {   
       temp = ui.value; 
       //Do something 
      } 
     }); 
     $("#amount").val($("#slider").slider("value")); 
    }); 
    </script> 

其正常工作。我想要做的是添加0.25,50,75和100间隔标记。

我已经经历了几个关于SO的问题，但不知道如何继续执行。将不胜感激的帮助。

我试过这个实现：http://jsbin.com/iwime但这不是我想要做的，因为我只想让滴答出现在那些固定的时间间隔，但用户应该可以选择其他值。

感谢 干杯

Answer 1

我猜你想是这样的：http://jsbin.com/iwime/116

因此，而不是使用滑块max选项蜱的数量，你用你要提供力所能及的最大单位，例如100.然后在refershTicks()中更新算法以切换类。

滑块设置：

var slider = $("#slider").slider({ 
     ... 
     max: 100,  // the only change 
     ... 
    }); 

而且refreshTicks()方法：

function refreshTicks() { 
     var s = slider 
      , lo = s.slider("values", 0), hi = s.slider("values", 1); 
     var max = s.slider('option', 'max'); 
     s.find(".tick").each(function(i) { 
      var i = (i + 1) * (max/ticks.length) - (max/ticks.length)/2; // the updated algorithm 
      var inRange = (i >= lo && i < hi); 
      $(this) 
       [(inRange ? 'add' : 'remove') + 'Class']("ui-widget-header") 
       [(inRange ? 'remove' : 'add') + 'Class']("ui-widget-content"); 
     }); 
    } 

Answer 2

Similar to this SO Question：从赞答案可能帮助。

jQuery UI的滑块的实施，他建议可以帮助你找到一个解决方案： http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/