add handlers to Jquery UI slider

Question

Is there a way to add handler to UI slider after initialization?

now i do:

var values = [0,50,100];
sliderbox.slider({
    values : values,
    min : 0,
    max : 100
});

but

sliderbox.slider( "option", "values", [ 0, 50,75,100 ] );

not works as expected. it just sets new values 0, 50,75 for existed handlers.

Duplicate of [jQuery UI - Slider - How to add values](http://stackoverflow.com/questions/19348528/jquery-ui-slider-how-to-add-values). No answer to Q. — Anto Jurković, Nov 17 '13 at 09:28
And duplicate of [How to add multiple handles to a jQuery slider on the fly](http://stackoverflow.com/questions/9590929/how-to-add-multiple-handles-to-a-jquery-slider-on-the-fly) — Anto Jurković, Nov 17 '13 at 09:44

Anto Jurković · Accepted Answer · 2013-11-17T08:47:30.590

It seems there is no way to change the length of values array using slider widget methods. Another option to change it also fails. For example:

$("#slide_me").slider({
    animate: true,
    value: 0,
    values: [0, 50, 60, 70, 80],
    min: 0,
    max: 100,
    slide: function(event, ui) {
        $("#my_value").val(ui.value);
    }
});

$("#slide_me").slider("values", [10, 20, 30, 40, 50, 60, 70]);

sets only the first 5 handlers.

It seems that you have to redefine your slider completely.

You can try to do that manually. The last handler which has value 50 is added as

<a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 50%;"></a>

So handlers for values 60 and 70 could be added if you build them in similar way.

add handlers to Jquery UI slider

1 Answers1