About input [type = range], multiple parameter and how to make everything work

    Usually, if you need to make a block with a slider or even cooler with a range selection, then we use a ready-made plugin from the jQuery UI set - slider () .

    image

    Everything works fine on a PC, we don’t even bother, we change styles and enjoy the functionality.
    The plug comes in at the moment when the project is a mobile version of something in html and you must use the slider instead of the field for entering values ​​- well, because it’s more convenient or for some other reason.

    This is where the problem arises. On windows phone 8 works, on android 4.1 there is no version, and iphone 4 also refused to work normally.
    The first thing I found that is on the network is noUiSlider, and it works pretty well everywhere, but I only have the first scroll of the slider, then everything lags, farts and jumps. I had to refuse, I did not find out the reason for the lags, and there was no time to figure it out.
    egorkhmelev.github.io/jslider immediately refused to work on mobile phones, jqxslider is good, but brakes.

    In short, the essence of the post: this is to take the native slider:

    Add parameter to it
    multiple 

    And make the range selection appear.
    In the documentation, something flashes about this parameter, but in fact nothing changes anywhere if you add it.

    Using simple manipulations with styles and scripts, we get something like:


    Initialization


    $('input[name=three]').nativeMultiple({
        stylesheet: "slider",
        onCreate: function() {
            console.log(this);
        },
        onChange: function(first_value, second_value) {
            console.log('onchange', [first_value, second_value]);
        },
        onSlide: function(first_value, second_value) {
            console.log('onslide', [first_value, second_value]);
        }
    });
    



    Plugin options


    stylesheet - an additional class for the slider.

    Item Parameters


    min - the minimum value
    max - the maximum value
    step - the slider step (default 1, this parameter can be omitted)
    value - the initial and final values ​​of the sliders, separated by commas. If there is no comma, the start and end are equal to this value. If there is no value, the initial and final values ​​are equal to the minimum and maximum values, respectively.

    Events


    The onCreate event occurs when the slider initializes.
    The onSlide event occurs when one of the sliders moves.
    The onChange event occurs when one of the sliders moves.

    I add that these wonderful white vertical two stripes on the sliders work only in webkit engines. Perhaps a common solution is to add background to the sliders with the stripes already drawn.

    But how to change the styles of sliders - the Internet is already full of articles and this publication is not directly related. Go for it!

    You can see an example and download the plugin on this page: lampaa.github.io/nativemultiple

    Also popular now: