Jquery UI slider, adding and removing handles

Question

I am in need of some assistance. I have been searching for a solution for days and it seems there is no solution, at least not with jquery.

I need a query UI slider with which I can add or remove handles on the fly. And if I create a new handle I need to find that specific one so I can manipulate it.

Heres a super easy http://jsfiddle.net/t0vy920c/.

$(".slider").slider({
    min:0,
    max:100,
    steps:1,
    values: [10, 50, 70,90]
});

Fiddle

I think I need to change the values parameter but I need to change its length, not its value. And I need to know which handle was created. I'm still pretty new when it comes to jquery UI, so any help would be appreciated!

Regards

Answer 1

If I got your question right, you just need to reinitialize slider on whatever event you want to add new item like:

$('button').bind('click', function(e){
    e.preventDefault();
    $(".slider").slider("destroy");
    values.push(val);
    values = values.sort();
    $(".slider").slider({
        min:0,
        max:100,
        steps:20,
        values: values   
     })
})

Here is some Fiddle

UPD added Fiddle with adding class to new element