Jquery ui slider with high max (long scale) not stepping as expected

Question

hope someone can shed light on this for me...

I have a jquery UI slider which requires high numbers (e.g. 0 - 600,000). With the step option set to 1 (the default setting), I'm seeing that the slider is returning numbers that are not in increments/decrements of 1 (in the 0 - 600,000 example, i get increments of 508).

I get the feeling this is expected behaviour, howeber, i need to understand why this happens (and i'm not much of a mathematician!) in order to figure out how to get it working for my purposes.

Please can anyone help me? C.f. code below - I'm using the range option:

$( "#slider-range" ).slider({
        range: true,
        min: 0,
        max: 600000,
        values: [ 0, 600000 ],
        step:1,
        slide: function( event, ui ) {//Triggered on every mouse move during slide
            console.log(ui.values[ 0 ]+' and '+ui.values[ 1 ]);
            //$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
            //ui.value : represents the value that the handle will have as a result of the current movement
        }
    });

Many thanks in advance.

Answer 1

This essentially depends on the width of your slider.

When the mouse moves, the widget computes the increment from the distance between the new mouse position and the previous one. This distance cannot be less than one pixel.

Therefore, if your slider's range extends to 600,000 units but the widget is only 100 pixels wide (for instance), then moving the mouse by one pixel will result in an increment of 600,000 / 100, i.e. 6,000 units.