Блог

У меня есть следующий код, и у меня проблема со слайдером пользовательского интерфейса jQuery. В чем моя проблема:

Хотя слайдер отображается правильно, он ведет себя очень странно. Что я имею в виду? Вместо рендеринга для обработчиков он отображает только один, и ползунок может скользить только до тех пор, пока значение 70 witch не станет вторым значением в моем массиве. Есть идеи, пожалуйста, о том, как решить эту проблему?

Вот мой код:

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);
                }
            }
        );
    }
);
  

Обратите внимание, что все значения корректно извлекаются из скрытого поля.

После долгого исследования кажется, что вы можете установить values or value после его инициализации!

Итак, я не нашел других решений, кроме как сделать это:http://jsfiddle.net/7YVVY/1 /

Это работает, но это не элегантно 🙂