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: 209

Filed under:
|
|
|

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

Related posts about jquery-ui

Related posts about select