如何使用滑块值调整滑块手柄的位置

Question

我使用句柄内的值构建了一个滑块。

我怎样才能操纵机芯，即4年后的手柄＆＃34;是在中间，在＆＃34; 5年＆＃34;位于蓝框内？

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');
        }
    });
});