How can I bind multiple Jquery UI Slider with "year" Select?
- by arthur_br
Hi,
I'm trying to render sliders instead of select components.
Each page has several select components marked with class='jqselect' and all of them will have decreasing year values (some years may be missing).
Eg. a select may have values [2010, 2009, 2006, 2005, 2004].
I have tried binding it both following the examples in the jQuery UI doc (but ignoring the missing years) and using selectToUISlider by filamentgroup (http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support//). None of them work.
Here is what I've done so far:
Binding selects with following slider container divs:
$('#content div.jqslider').slider({
animate: true,
min: $(this).prev().children().last().val(),
max: $(this).prev().children().first().val(),
slide: function(event, ui) {
var select = $(this).prev();
select.val($(this).slider('option', 'value'));
console.log($(this).slider('option', 'value')); //debug
}
});
This renders the slider, but console logs values from 0 to 100 and selects obviously does not change with the event.
Using selectToUISlider:
$('#content select.jqselect').selectToUISlider();
This does not even render the slider, throwing an error 'b is undefined' in jquery-min.js (line 30, v1.4.2). If I pass the identifier of only one of the sliders, it is rendered but very buggy.
Please, I'm stucked in the by two days and any help is much appreciated.
Regards,
Arthur
