jquery-ui - 如何用 slider 值调整 slider handle 的位置

Question

我已经构建了一个 slider ，其值位于 handle 内。

如何操纵机芯，使“4 年”处的 handle 位于中间，“5 年”处的 handle 位于蓝色框内？

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