3

I am using the jQuery UI slider from Filament group where it will convert a SELECT element to the slider. It works fine. Now I want to programmatically move the slider handler to a particular point in the slider scale using JavaScript.

Ex: When I click on a button, it will call a JavaScript function and inside that I want to write the piece of code which will move the slider pointer to a specific tic/slider point in the scale.

I have my sample application here:

$(function(){
$('#speed').selectToUISlider();
//fix color
//fixToolTipColor();
}); 


function Move()
{
  // How do i move to "Slow" point ?

}

http://jsfiddle.net/DrR7s/15/

halfer
  • 19,824
  • 17
  • 99
  • 186
Shyju
  • 214,206
  • 104
  • 411
  • 497

3 Answers3

4

You can use the "option" function for that, so:

$('#someSliderElement').slider('option', 'value', 25); // Replace 25 with a value between 0-100
Elte Hupkes
  • 2,773
  • 2
  • 23
  • 18
  • @Shyju It's not working for you because you're using `selectToUISlider()` (should have mentioned that in the question), so telling your original `#speed` element to change its value does nothing. – NickAldwin Jun 30 '11 at 15:58
  • @Shyju this comment suggests that you need to use `next()`: http://www.filamentgroup.com/lab/update_jquery_ui_16_slider_from_a_select_element/#commentNumber24 – NickAldwin Jun 30 '11 at 16:03
1

I struggled with this for a bit too. Basically, you just have to set the value of the select and then trigger the select's change event. This should do the trick.

$('#speed').val('Fast');
$('#speed').trigger('change');

I updated jsfiddle with the fix: http://jsfiddle.net/DrR7s/44/.

Nate Irwin
  • 600
  • 1
  • 11
  • 20
0

And you have js error in your example.

"Uncaught ReferenceError: Move is not defined"

Just put your Move function to html body.

Junior
  • 25
  • 4