How can I bind multiple Jquery UI Slider with "year" Select?
Posted
by arthur_br
on Stack Overflow
See other posts from Stack Overflow
or by arthur_br
Published on 2010-06-05T18:10:51Z
Indexed on
2010/06/05
18:12 UTC
Read the original article
Hit count: 204
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
© Stack Overflow or respective owner