如何使用滑塊值調整滑塊手柄的位置

Question

我已經使用手柄內的值構建了滑塊。

我該如何操作機芯，「4年」的手柄位於中間，「5年」位於藍色盒子內？

http://jsbin.com/IGEsIJaQ/6/edit

Answer 1

您可以使用margin-left

例子：

$(function() { 
    var slider = $('#slider').slider({ 
     range: 'min', 
     min: 3, 
     max: 5, 
     value:3, 

     create: function(event, ui) { 
      var v= $(this).slider('value'); 

      $(this).find('.ui-slider-handle').text(v + ' years'); 

     }, 

     slide: function(event, ui) { 
      var handle = $('.ui-slider-handle'), 
       handleWidth = handle.width(), 
       position = handle.position(), 
       marginLeft; 

      handle.text(ui.value + ' years'); 
      if(ui.value == 4) 
      marginLeft = -handleWidth/2-10; 
      else if(ui.value == 5) 
      marginLeft = -handleWidth-20; 
      else 
      marginLeft = 0; 
      handle.css('margin-left',marginLeft+'px'); 
     } 
    }); 
}); 

http://jsbin.com/IGEsIJaQ/8/edit?html,css,js,output

Answer 2

如果你有多個滑塊，或者一個範圍滑塊有兩個把手：

$(function() { 
     var your_slider = $('#slider').slider({ 
     range: 'min', 
     min: 3, 
     max: 5, 
     value:3, 

     create: function(event, ui) { 
      var v= $(this).slider('value'); 

      $(this).find('.ui-slider-handle').text(v + ' years'); 

     }, 

     slide: function(event, ui) { 
      $(ui.handle).text(ui.value + ' years'); 

      var handleWidth = $(ui.handle).width(), 
       position = $(ui.handle).position(), 
       marginLeft; 

      if(ui.value == your_slider.slider("option", "min")) 
       marginLeft = 0; 
      else if(ui.value == your_slider.slider("option", "max")) 
       marginLeft = -handleWidth; 
      else 
       marginLeft = -handleWidth/2; 

      $(ui.handle).css('margin-left',marginLeft+'px'); 
     } 
    }); 
});