Trigger a jQuery UI slider event

user_24181 0
Viewed 86130

How can I trigger a change event on a jQuery UI slider?

I thought it would be 

$('#slider').trigger('slidechange');

but that does nothing.

Full example script follows:

<link href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" type="text/css"> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script> 
<script src="http://jqueryui.com/latest/ui/ui.core.js" type="text/javascript"></script> 
<script src="http://jqueryui.com/latest/ui/ui.slider.js" type="text/javascript"></script> 

<body>

<div id="slider"></div>

<script type="text/javascript">

$().ready(function()
{
    $('#slider').slider({change: function() { alert(0); }});

    // These don't work
    $('#slider').trigger('change');
    $('#slider').trigger('slidechange');
});
</script>

I would expect this to alert "0" when the page loads

jquery-ui-slider events jquery
12 Answers

This maybe resurrecting an old thread, but was just having a similar experience. The solution that I came up with (because the thought of calling slider(...) multiple times was not appealing):

$slider.slider('option', 'slide').call($slider, event, ui);

With $slider being bound to the $(selector).slider(...) initialization.

user_18128540

As documentation;

change( event, ui ) Triggered after the user slides a handle, if the value has changed; or if the value is changed programmatically via the value method.

Just setup bind change event

$(".selector").slider({change: function(event, ui) {console.log('It Works!'}});

and set value

$(".selector").slider('value',0);
user_18454910

I've hit this problem recently, and used Felipe Castro's comment-solution, with a necessary change to set the context right:

$slider.slider('option', 'slide').apply($slider, [null, {value: $slider.slider('value')}])
user_38248040

The jQueryUI Slider documentation gives the following example for triggering an event:

$( ".selector" ).slider({
    change: function( event, ui ) {}
});

and for the event trigger:

$( ".selector" ).on( "slidechange", function( event, ui ) {} );

this didn't work for me!

All I had to do to get it working was to change "slidechange" to "change".

$( ".selector" ).on( "change", function( event, ui ) {} );

Hope this helps the future generations that stumbleupon this problem.

user_12089660
Related