невозможно переместить ползунок, если значение не является целым числом слайдер jquery ui

У меня возникла проблема с подключаемым модулем jQuery UI Slider. Что я пытаюсь сделать, так это то, что если в базе данных нет значения для ползунка, это означает, что рейтинга еще не было, поэтому я хочу отобразить что-то вроде «Нет значения» или «Ноль» или что-то в этом роде. Проблема в том, что если это значение не является целым числом, я не могу переместить ручку ползунка. Вы можете просмотреть ДЕМО ЗДЕСЬ.

Почему это происходит, есть идеи, что я делаю неправильно, почему я не могу переместить ползунок, если значение не является допустимым целым числом.


slider jquery jquery-ui jquery-ui-slider
person user765368    schedule 18.02.2012    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Это довольно просто. Как сказано в документах для ползунка, параметр value должен быть числом, и вы имеют "--". Установите значение 0 или просто ничего (например, "") jsFiddle пример.

person j08691    schedule 18.02.2012

arrow_upward
0
arrow_downward

Ползунок jQuery работает на основе целочисленных значений. Что вы хотите сделать, когда ползунок «не целое число»?

Проверьте приведенный ниже код, чтобы остаться на 0, если это не число,

function getSliderVal ($this) {
    var val = $this.val();
    return isNaN(val)?0:val;
}

и в параметре значения

    ...
    value: getSliderVal (theSlider1.find("input[id=slider-value-1]")), 

    value: getSliderVal(theSlider2.find("input[id=slider-value-2]")),  
    ...

ДЕМО

person Selvakumar Arumugam    schedule 18.02.2012

arrow_upward
0
arrow_downward

Мое предложение состоит в том, чтобы связать число (например, -1) с состоянием «Нет значения» и иметь некоторую логику JavaScript, которая поможет вам получить то, что вы хотите:

$(".slider").slider({
    range: "min", 
    min: -1, 
    max: 10, 
    slide: function(event, ui){
        var value;
        if(ui.value == -1)
        {
            value = "--";
        }
        else
        {
            value = ui.value;
        }

        $(this).find("input.slider-value").val(value);
    },
    create: function(event, ui){
        $(this).slider("value", $(this).find("input.slider-value").val()); // value of the slider handle
    }
});

<div>
    <p style="color:green;"><b>Slider can be moved</b></p>

    <div class="slider"><br/>
        <input class="slider-value" type="text" value="3" style="text-align: center;" />
    </div>
</div>

ДЕМО

person satoshi    schedule 18.02.2012