Question

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/

Answer 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/.