Best IT Recipes

Run jQuery UI slider event

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

I thought it would be

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

but it does nothing.

A 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 expect this to warn "0" when the page loads

+51
jquery events jquery-ui-slider
Aug 17 '09 at 16:00
source share
10 answers

Try

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

Not perfect, but helps you work!

alt text

+44
Aug 17 '09 at 16:46
source share

I know that this is the way to the publication date, but I wanted to publish this solution for everyone who came across this post.

You can fire the event by doing something line by line:

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

Unfortunately, you cannot define functions as parameters inside an init object, however, I think it ends up looking cleaner and more direct and correct than another answer using a call method (i.e. it uses an event system).

And yes, the callbacks that you define here will be called during normal operation (in this case, changing the position of the slider), as usual. Just make sure you use the correct event type names from the user interface documentation.

If you want to add several events at once, remember that you can provide an object for binding using 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, though, this is not very clear. He asked me to develop a couple of plugins myself, in order to really understand the user interface event system.

Enjoy

+34
Jul 05 2018-11-11T00:
source share

A good approach is to simply change the value of the slider. Then, a custom slider change method should respond to a change in value. For example:

 var newValue=5; $('#slider').slider("value", newValue);
+11
Apr 17 '13 at 21:16
source share

Another way that is convenient for a user interface widget, such as autocomplete, is to access the event directly using the data method. JQuery stores all information about connecting to an event using .data ("events"), so if you use this property, you can directly access events. On some components of the user interface (for example, autocomplete), events are not even tied to the main element, they are tied to the user interface object itself. Fortunately, this user interface object is also available in data.

So, without much ado, here is how you trigger the autocomplete select event:

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

Or, (return to the sliders) to cause the slider to change:

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

The trigger is still the best way, since it really uses an event system, but in more complex widgets where "$ (elem) .trigger" is not enough, this approach is convenient.

* EDIT *

It just turned out that you really can "trigger" an event accordingly using this method using the "secret" _trigger property widget. For example:

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

Hope this helps someone.

+5
Jan 20 2018-12-01T00:
source share

It may be the resurrection of the old stream, but he had a similar experience. The solution I came across (because the thought of calling slider(...) several times was not attractive):

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

With $slider is associated with initializing $(selector).slider(...) .

+4
Nov 04
source share

I would like to add a comment to Joey Yore's answer -

I think it's better the other way around.

 $('#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.

+2
Sep 28 2018-11-11T00:
source share

It was easier for me to use the create method to call the slide or stop function. For example, for a slider with a range of min / max:

 $('#height').slider({ ... create: function(event, slider){ $( "#height" ).slider( "option", "values", [1100, 1500] ); handleHeightSlide('slide', $( "#height" ));}, ... });
+2
Jun 22 2018-12-22T00:
source share

As documentation ;

change (event, ui) Fired after the user shifts the handle if the value has changed; , or if the value is changed programmatically using the value method.

Just configure the binding change event

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

and set the value

 $(".selector").slider('value',0);
+1
Nov 26 '13 at 15:12
source share

If you are attached to a slider change event:

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

Then you can call it like this:

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

The solution mentioned above by Joey Yore also works, but the disadvantage is that the slidechange event slidechange not slidechange (from my experience) when the user changes his slider from the user interface.

 //TO DEFINE SLIDER AND EVENTS $('#slider').slider().bind('slidechange',function(event,ui){...}); //TO TRIGGER EVENT $('#slider').trigger('slidechange');
0
Jun 25 '13 at 20:46
source share

I used both slides and slides, shift triggers when dragging a point, triggers with a slider after releasing the mouse button (just like the 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) { });
0
Dec 14 '14 at 17:11
source share


More articles:


All Articles