CODEWITHSUNDEEP
jqueryeventsjquery-ui-slider
Greg
Greg

Reputation: 321826

Trigger a jQuery UI slider event

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

Upvotes: 55

Views: 90269

Answers (12)

Joe Black
Joe Black

Reputation: 423

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.

Upvotes: -1

niquis7
niquis7

Reputation: 1

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')}])

Upvotes: 0

redsquare
redsquare

Reputation: 78687

Try

$slider = $('#slider');
$slider.slider('option', 'change').call($slider);

Not ideal but gets you working!

alt text

Upvotes: 51

Premila
Premila

Reputation: 15

I Used both slidechanged and slide, slide triggers when drag the point, slidechanged triggers after release the mouse button (just like click event)

var slider1 = $("#slider1").slider({ min: 1, max: 6 });
//option 1
slider1.on("slide", function (e, ui) {

});
//Option 2
slider1.on("slidechanged", function (e, ui) {

});

Upvotes: 0

Wayne Weibel
Wayne Weibel

Reputation: 973

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.

Upvotes: 4

rbostan
rbostan

Reputation: 37

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

Upvotes: 1

Nikolai Samteladze
Nikolai Samteladze

Reputation: 7797

If you bind to to the slider's change event like that:

$('#slider').change(function() {
    alert('action');
});

Then you can trigger it like:

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

The solution below mentioned by Joey Yore works too, but the downside is that slidechange event is not fired (from my experience) when user changes your slider from UI. 

//TO DEFINE SLIDER AND EVENTS
$('#slider').slider().bind('slidechange',function(event,ui){...});

//TO TRIGGER EVENT
$('#slider').trigger('slidechange');

Upvotes: -1

hrabinowitz
hrabinowitz

Reputation: 1650

A good approach is simply to change the value of the slider. The slider's own change method should then respond to the change of value. For instance:

var newValue=5;
$('#slider').slider("value", newValue);

Upvotes: 18

Phil De Caux
Phil De Caux

Reputation: 21

I found it easier to use the 'create' method to call the slide or stop function. Eg, for a slider with a min/max range:

$('#height').slider({
        ...
        create: function(event, slider){ $( "#height" ).slider( "option", "values", [1100, 1500] ); handleHeightSlide('slide', $( "#height" ));},
        ...
    });

Upvotes: 2

machineghost
machineghost

Reputation: 35725

Yet another way, which is handy for UI widgets like autocomplete, is to access the event directly via the data method. JQuery stores all of its event hookup info using .data("events"), so if you use that property you can access the events directly. On some UI components (eg. autocomplete) the events aren't even attached to the main element, they're attached to the UI object itself. Luckily, that UI object is also available in data.

So, without further ado, here's how you'd invoke the autocomplete's select event:

$("#autoComplete").data("autocomplete").menu.select()

Or, (getting back to sliders) to trigger a slider's change:

$("#slider").data("slider")._change()

Trigger is still the best way of course, since it actual utilizes the event system, but on the more complex widgets where "$(elem).trigger" won't be enough, this approach is handy.

* EDIT *

Just figured out that you actually can "trigger" the event properly with this method, using the widget's "secret" _trigger property. For example:

$("#autoComplete").data("autocomplete")._trigger("select", fakeEvent, fakeItem)

Hope this helps someone.

Upvotes: 4

gotofritz
gotofritz

Reputation: 3381

Wanted to add a comment on Joey Yore's answer -

I think it's better the other way round

$('#slider').bind({
    slidestart  : function(event,ui) {...},
    slidechange : function(event,ui) {...},
    slidestop   : function(event,ui) {...},
    slidecreate : function(event,ui) {...}
}).slider();

Otherwise some events (namely, 'slidecreate') will be ignored

Upvotes: 2

Joey Yore
Joey Yore

Reputation: 411

I know this is way past the post date, but I wanted to post to provide this solution to anyone that stumbles upon this post.

You can accomplish event triggering by doing something along the lines of:

//TO DEFINE SLIDER AND EVENTS
$('#slider').slider().bind('slidechange',function(event,ui){...});

//TO TRIGGER EVENT
$('#slider').trigger('slidechange');

Unfortunately you cannot define the functions as options within the init object, however, I think it ends up looking cleaner and is more straight forward and correct than the other answer using the call method (i.e. it does use the event system).

And yes, the callbacks you define here will be called on normal operation (changing the position of the slider in this case) as it normally would. Just make sure you use the correct event type names from the UI documentation.

If you want to add multiple events at once, remember you can provide an object to bind using the event names as keys:

//TO DEFINE SLIDER AND EVENTS
$('#slider').slider().bind({
    slidestart  : function(event,ui) {...},
    slidechange : function(event,ui) {...},
    slidestop   : function(event,ui) {...},
});

//TO TRIGGER EVENTS
$('#slider').trigger('slidestart');
$('#slider').trigger('slidechange');
$('#slider').trigger('slidestop');

This is noted in the documentation, although, it is not very clear. Took me developing a couple plugins on my own to really understand the UI event system.

Enjoy

Upvotes: 40

Related Questions