How can I bind multiple Jquery UI Slider with "year" Select?

Question

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

Answer 1

Thanks for those who have visited. After 2 days trying I could have it working using selectToUISlider.

Simple stuff, but got me plenty of work and trial/errors.

selects = $('#content select.jqselect');
$.each(selects, function(key, value) {
    $('#' + $(selects[key]).attr('id')).selectToUISlider().hide();
});

If anyone know of a better of more optimized way of doing this, please comment, and you will be very welcome.

Regards.