Jquery UI Slider Increment and decrement

1.1k Views Asked by At

enter image description here

I have a slider which has 4 handler, each handler has their own popup with decrements and increments, how can i move the sliders while clicking on minus(-) and plus(+) button.

Please help..

1

There are 1 best solutions below

5
On BEST ANSWER

according to documentation

You can set the value like

$( ".selector" ).slider( "option", "value", 10 );

or

var slider = $( "#slider" ).slider();

slider.slider('value',10);

Use your logic to increment or decrement the value

UPDATE

Check this updated fiddle

I have changed the logic a little bit

$(document).ready(function(){
    var i = parseInt(160);  
    var values = [140, 160, 180, 200];
    var vitalslider = slider(values);

    $('#increment').on('click', function(){
        i++;
        values[1] = i;
        vitalslider.limitslider('destroy');
        vitalslider = slider(values);
    });
    $('#decrement').on('click', function(){
        i--;
        values[1] = i;
        vitalslider.limitslider('destroy');
        vitalslider = slider(values);
    });

    function slider(values){
        return  $('#basic').limitslider({
                    values: values,
                    value:'',
                    min: 140,
                    max: 200,
                    limitCls:'vital_limit',
                    showRanges: true,
                    left: 100,
                    label: true,
                    ranges: [false, true, true, true]
                });
    }
});