Dynamic JQuery UI slider constructed from HTML5 data-* and CSS class

Question

I'm trying to create multiple jquery UI sliders using a single CSS class and HTML5 data-* values, but without success. I can get some values, but some simply doesn't work.

Here is the code: http://jsfiddle.net/Smartik/FTtAb/1/

As you can see, data-id and data-val works but I can't get values for data-min, data-max, data-step(which are the most important already). Try to uncomment these lines and see what's happen.

So, my question; is there a way to get these values using data-* or something else?

Answer 1

Apart from parseInt you should also use the data function. Here is a modified fiddle:

http://jsfiddle.net/FTtAb/3/

jQuery('.sliderui').each(function() {
    var obj = jQuery(this);
    var sId   = "#" + obj.data('id');
    var val   = parseInt(obj.data('val'));
    var min   = parseInt(obj.data('min'));
    var max   = parseInt(obj.data('max'));
    var step  = parseInt(obj.data('step'));


    obj.slider({
        value: val,
        min: min,
        max: max,
        step: step,
        slide: function( event, ui ) {
            jQuery(sId).val( ui.value );
        }
    });
});