how to manipulate ui.handle in jQuery UI range slider after postback?

4
votes

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]);
2
jqueryjquery-uiuser-interfacesliderhandle
Double check your HTML layout, also, you don't need the $() wrapper on ui.handle – SpYk3HH
Then there must be something wrong with your code... I've created a super simple JSFiddle and used your code, and console reports left and right handle respectively as they're being used. Check it out and see for yourself. – Robert Koritnik
btw, values should not be outside the min/max bounds – Gabriele Petrioli
What I want to display is not in the range min/max, min/max is just used for steps. I have indicate the "values" for displaying correct values. – SUN Jiangong

2 Answers

1
votes

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

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

If you don't know your ID:

$(ui.handle).parent().slider('option', 'values', [min, max]);