Search code examples
jqueryuser-interfaceuislider

Jquery UI Slider Increment and decrement


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..


Solution

  • 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]
                    });
        }
    });