javascriptjqueryjquery-mobilejquery-mobile-slider

jQuery Mobile Slider Steps not behaving when numbers are large


I have a slider that is from 1 to 5 million, somehow jquery mobile optimizes the stepping to 50000 when using the slider despite me specifying the step to 1000. is there anyway to force override this behaviour

<form>
    <label for="slider-1">Slider:</label>
    <input type="range" name="slider-1" id="slider-1" min="0" max="5000000" value="10"    step="10" />
</form>

demo here:

http://jsfiddle.net/LSGAk/3/


Solution

  • If i'm not mistaken, you can't override it except if you're willing to change the source code of jQm.

    The line that are the source of that behavior are in the function refresh. More precisely the following block:

    if ( typeof val === "object" ) {
        data = val;
        // a slight tolerance helped get to the ends of the slider
        tol = 8;
        left = this.slider.offset().left;
        width = this.slider.width();
        pxStep = width/((max-min)/step);
        if ( !this.dragging ||
            data.pageX < left - tol ||
            data.pageX > left + width + tol ) {
                return;
        }
        if ( pxStep > 1 ) {
            percent = ( ( data.pageX - left ) / width ) * 100;
        } else {
            percent = Math.round( ( ( data.pageX - left ) / width ) * 100 );
        }
    }
    

    In the case of an interraction with the mouse/tap, val is an object and in your case pxStep is inferior to 1. So we have the round coming into action.

    P.S: Not totally sure about what I wrote, it just had a quick glance at the code , but it seems to me that it behave this way.