jQuery UI selectToUISlider event binding issue

I have been using selectToUISlider jQuery UI plugin from Filament group with jQuery v 1.4.3 and jQuery-UI v 1.8.5, which is a very excellent plugin that makes jQuery UI Slider more powerful and easier to use,
In my case, I have 2 combo boxes select elements both has the same options, and I was using this plugin to transform them into a range slider, the plugin seem to be working very well, when I move the slider, the combo box values are changing, but when I tried to bind this slider to a slide or stop events, nothing gets triggered! the values of the select elements are changing but no event is triggered back!

I have looked at the posts on their website , it seems to be a common problem, Filament group said that it extend jQuery’s UI slider events and using slide or stop events should do the job, but for some reason the event is not triggered.


I have digged down into their code trying to make things work, and here’s the workaround that I’v done:

first I bind a change event to the select boxes inside my page:


$('select').change(function(){
     // handle changed values
});

in the selectToUISlider.jQuery.js go to the slide event and add the slider’s stop callback function right after the slide callback as follows:


slide: function(e, ui) {//slide function
	...
},
stop: function(e, ui) { // handle stop sliding event
	var thisHandle = jQuery(ui.handle);
	var currSelect = jQuery('#' + thisHandle.attr('id').split('handle_')[1]);
	// trigger back any change function
	currSelect.change();
},

what we have done here in the stop function:
first we took the handler object which has the same ID of our select object with a handle_ prefix, so we extracted the select ID and then triggered the change function to indicate that some values has changed here 🙂
, so whenever the user stops sliding this slider, the change event will be called back

hope this will help you as well 🙂

follow me on:

awesome icons by WPZOOM

Advertisements

3 thoughts on “jQuery UI selectToUISlider event binding issue

  1. prix fenetre en pvc

    After looking at a number of the articles on your website, I seriously appreciate your technique of blogging.
    I added it to my bookmark website list and will be checking back soon.
    Take a look at my website too and tell me what you think.

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s