添加蜱滑塊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/