4

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]);
4
  • Double check your HTML layout, also, you don't need the $() wrapper on ui.handle
    – SpYk3HH
    Sep 27, 2012 at 15:10
  • 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. Sep 27, 2012 at 15:27
  • btw, values should not be outside the min/max bounds Sep 27, 2012 at 16:00
  • 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. Oct 4, 2012 at 8:15

2 Answers 2

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]);
0

If you don't know your ID:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.