JQuery UI range silder in rails app

Question

У меня есть небольшая проблема с слайдером, который я использую для диапазона времени.

Когда я перемещаю один из обработчиков, а затем второй, первый меняет его значение на небольшой бит. (5 мин в моем случае)

Вот мой код

function slideTime(event, ui){ 
    var minutes0 = parseInt($("#slider_range").slider("values", 0) % 60); 
    var hours0 = parseInt($("#slider_range").slider("values", 0)/60 % 24); 
    var minutes1 = parseInt($("#slider_range").slider("values", 1) % 60); 
    var hours1 = parseInt($("#slider_range").slider("values", 1)/60 % 24); 
    $("#log_times_from").val(getTime(hours0, minutes0)); 
    $("#log_times_to").val(getTime(hours1, minutes1)); 
} 

function getTime(hours, minutes) { 
    var time = null; 
    minutes = minutes + ""; 
    if (minutes.length == 1) { 
     minutes = "0" + minutes; 
    } 
    return hours + ":" + minutes; 
} 
slideTime(); 

$(document).ready(function() { 
$("#slider_range").slider({ 
     range: true, 
     min: 0, 
     max: 1439, 
     values: [540, 1020], 
     step:5, 
     slide: slideTime 
    }); 

}) 

Любые идеи о том, почему обработчики двигаться, когда я двигаю другой?

Answer 1

Я нашел его, по compering его кода в документации jqueryUI для диапазона слайдера

Это решает проблему. Я использую ui.values ​​вместо того, чтобы каждый раз выбирать идентификатор

function slideTime(event, ui){ 
    var minutes0 = parseInt(ui.values[ 0 ] % 60); 
    var hours0 = parseInt(ui.values[ 0 ]/60 % 24); 
    var minutes1 = parseInt(ui.values[ 1 ] % 60); 
    var hours1 = parseInt(ui.values[ 1 ]/60 % 24); 
    $("#log_times_from").val(getTime(hours0, minutes0)); 
    $("#log_times_to").val(getTime(hours1, minutes1)); 
    $("#time").text(getTime(hours0, minutes0) + ' - ' + getTime(hours1, minutes1)); 
    $("#time1").text(getTime(hours0, minutes0) + ' - ' + getTime(hours1, minutes1)); 
} 

function getTime(hours, minutes) { 
    var time = null; 
    minutes = minutes + ""; 
    if (minutes.length == 1) { 
     minutes = "0" + minutes; 
    } 
    return hours + ":" + minutes; 
} 

$(document).ready(function() { 
$("#slider_range").slider({ 
     range: true, 
     min: 0, 
     max: 1439, 
     values: [540, 1020], 
     step:5, 
     slide: slideTime 
    }); 

})