I have a range slider with custom steps that has two handles (min and max) that select a closed area to filter the results on my .aspx page. As soon as I press the confirmation button, the postback page shows my ideal results.
But the first time I want to move the handle to the right, it moves to the left. When I register the current handle, it always shows the handle on the left. I do not understand why.
This is part of my code:
var stepvalues = ["0", "3000", "5000"]; $("#slider-range").slider({ range: true, min: 0, max: 2, step: 1, values: [0, 5000], slide: function (event, ui) { console.log($(ui)); console.log($(ui.handle)); } });
Do you have any hints?
Thank you very much.
EDIT
What I want to do is min / max range from 0 to 5000 with three possible values when I move the slider. It can only be 0 or 3000 or 5000.
Now I can move the slider to display relative values, and it works when I submit a search form. But as soon as it does postback, the first time I move the slider to the right, it moves the left slider. This is a strange behavior for me. And I want it to work correctly.
When I spell "ui", it has several properties:
Object { handle=a.ui-slider-handle, value=3, values=[2]}
the value "ui.handle" is always the first descriptor of my slider;
the value "ui.value" is the value of the first descriptor;
whereas "ui.values" contains the values of two handles.
EDIT
I found that it was difficult to manipulate $ (ui.handle), I used the following code to fix my problem.
$("#slider-range").slider('option', 'values', [min, max]);