Question

I have a jquery range slider with custom steps which has two handles (min & max) selecting a closed area for filtering results in my .aspx page. Once I click confirmation button, the page postback and shows my ideal results.

But the first time i want to move the handle on the right, it’s the handle on the left that moves. When i log current handle, it’s always the handle on the left shows. I can’t 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 clue?

Thanks you very much.

EDIT:

What i want to do is the min/max range is from 0 to 5000 with 3 possible values when i move the slider. It could only be 0 or 3000 or 5000.

Now i can move the slider to display relative values, and it works when i submit the form for search. But once it does the postback, the first time i move the slider on the right, it’s the left slider who moves. This is a strange behavior for me. And i want it works correctly.

When i log “ui”, it has several properties:

Object { handle=a.ui-slider-handle, value=3, values=[2]}

the value of “ui.handle” is always the first handle in my slider;
the value of “ui.value” is alwyas the value of the first handle;
whereas “ui.values” contains values of the two handles.

EDIT:

I found it that it was difficult to manipulate $(ui.handle), I’ve used the following code for fix my problem.

$("#slider-range").slider('option', 'values', [min, max]);

Answer 1

As I’ve solved this problem myself, I put working code here and mark it as solved!

$("#slider-range").slider('option', 'values', [min, max]);