jQuery Пользовательский слайдер jQuery

Question

Я создал простой слайдер с пользовательским интерфейсом jQuery, и я должен был что-то сделать немного неправильно. Он работает, но когда вы нажимаете на ручку ползунка, слегка двигайте мышью, ползунок перескакивает на несколько пикселей.

У меня есть пример здесь: http://jsfiddle.net/pLJE8/3/

Кто знает, как это исправить?

Спасибо!

Answer 1

У меня была такая же проблема. Я пробовал образец временного диапазона от this site

После некоторого тестирования я закончил с этим кодом.

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".slider-timerange").slider({ 
      range: true, 
      min: 0, 
      max: 1439, 
      values: [540, 1020], 
      step: 5, 
      slide: function (event, ui) { 
       var val0 = ui.values[0]; 
       var val1 = ui.values[1]; 
       slideTime(val0, val1); 
      } 
     }); 

     var initialVal0 = $("#slider-timerange").slider("values", 0); 
     var initialVal1 = $("#slider-timerange").slider("values", 1); 
     slideTime(initialVal0, initialVal1); 
    }); 

    function slideTime(val0, val1) { 
     var minutes0 = parseInt(val0 % 60, 10); 
     var hours0 = parseInt(val0/60 % 24, 10); 
     var minutes1 = parseInt(val1 % 60, 10); 
     var hours1 = parseInt(val1/60 % 24, 10); 
     var startTime = getTime(hours0, minutes0); 
     var endTime = getTime(hours1, minutes1); 
     $("#time-range").text(startTime + ' - ' + endTime); 
    } 
</script> 

Похоже, что следующий призыв является грешником, который вызывает прыжки.

var val0 = $("#slider-timerange").slider("values", 0); 

PS: Я не Java-профессионалом;)

Answer 2

Вам просто нужно установить маржу оставил половину ширины

.ui-slider .ui-slider-handle{ //for vertical 
    height: 30px; 
    margin-bottom:-15px; 
} 
.ui-slider .ui-slider-handle{ //for horizontal 
    width: 30px; 
    margin-left:-15px; 
} 

и набор CSS acordingly.