jQuery UI slider: small steps on large range

Question

I have range slider for my filter:

var start_value_emp = Math.floor(getUrlParameter("emp_from")) ? getUrlParameter("emp_from") : 0;
var end_value_emp = Math.floor(getUrlParameter("emp_to")) ? getUrlParameter("emp_to") : 1001;

jQuery(".slider_employees_main").slider({
    range: true,
    min: 0,
    max: 1001,
    step: 1,
    values: [start_value_emp, end_value_emp],
    slide: function (event, ui) {

        var currEmpValueStartSlide = ui.values[0] > 0 ? ui.values[0] : '...';
        var currEmpValueEndSlide = ui.values[1] < 1001 ? ui.values[1] : '...';

        jQuery(".employee_select_info_main_from").html(currEmpValueStartSlide);
        jQuery(".employee_select_info_main_to").html(currEmpValueEndSlide);

        jQuery(".emp_from_main").val(ui.values[0]);
        jQuery(".emp_to_main").val(ui.values[1]);

        $(".slider_employees_main").slider("values", ui.values);
    }
});

I've set slider step to 1, but when I'm sliding the slider, step is 3, 4 or 5 but not 1 as it should be, maybe it is due to large scale (0 - 1001)? Any ideas how to set the step stick to 1?

Answer 1

I think that problem is here:

var currEmpValueStartSlide = ui.values[0] > 0 ? ui.values[0] : '...';
var currEmpValueEndSlide = ui.values[1] < 1001 ? ui.values[1] : '...';

Because of javascripts pass by reference style of assigning variables your jQuery(".employee_select_info_main_from") and jQuery(".employee_select_info_main_to") are glued with ui.values[0] and ui.values[1] , which makes ui.value[0] equal to 3 when jQuery(".employee_select_info_main_from").html() equals to ... . Try to prevent reference like this:

 function copy( value ) {
     return JSON.parse( JSON.stringify( value ) );
 }

 var currEmpValueStartSlide = ui.values[0] > 0 ? copy( ui.values[0] ) : '...';
 var currEmpValueEndSlide = ui.values[1] < 1001 ? copy( ui.values[1] ) : '...';