Question

I have the following code and I have problem with jQuery UI Slider. What is my problem:

While the slider is rendered correctly, it acting very strange. What do I mean? Instead of rendering to handlers it is rendering only one, and the slider can slide only until the value 70 witch is the second value into my array. Any idea please on how to solve that problem ?

Here is my code:

HTML:

<td valign="top">
    <input 
        class="slider_hidden" 
        type="hidden"
        name="field_name" 
        value="10,70" 
        id="slider_hidden" 
        data-disabled="0"
        data-min="0"
        data-max="100"
        data-orientation="horizontal"
        data-step="1"
        data-range="1"
    />
    <div class="slider"></div>
    <br />
    <span class="description"><?php echo $description; ?></span>
</td>

JavaScript

$(document).ready(
    function()
    {
        $(".slider").each(
            function()
            {
                var val = $(this).prev('input.slider_hidden').val();
                var min = $(this).prev('input.slider_hidden').data('min');
                var max = $(this).prev('input.slider_hidden').data('max');
                var step = $(this).prev('input.slider_hidden').data('step');
                var slide_disabled = ($(this).prev('input.slider_hidden').data('disabled') == "1" ? true : false);
                var orientation = $(this).prev('input.slider_hidden').data('orientation');
                var range = ($(this).prev('input.slider_hidden').data('range') == "1" ? true : false);

                $(this).slider(
                    {
                        min: min,
                    max: max,
                        step: step,
                        disabled: slide_disabled,
                        orientation: orientation,
                        slide: function(e, ui)
                        {
                            console.log(ui);
                            $(this).prev('input.slider_hidden').val(ui.value);
                        }
                    }
                );

                $(this).slider('option', 'range', range);

                if(range == true)
                {
                    var s = val.split(',');
                    $(this).slider("option", "values", s);
                }
                else
                {
                    $(this).slider("option", "value", val);
                }
            }
        );
    }
);

Note that all values are retrived correctly from hidden field.

Answer 1

After a long investigation, it seems you can set values or value once it has been initialized !

So I’ve found no others solutions than doing this : http://jsfiddle.net/7YVVY/1/

It works, but it is not elegant 🙂