不能移動滑塊如果值不是整數jquery ui滑塊

Question

我在這裏有一個問題，jQuery UI Slider插件。我試圖完成的是，如果數據庫中的滑塊沒有值，那意味着還沒有評級，所以我想顯示「無值」或「無」之類的東西。問題是，如果該值不是整數，我不能移動滑塊手柄。您可以查看DEMO HERE。

爲什麼會發生這種情況，任何想法我做錯了什麼，爲什麼我不能移動滑塊，如果該值不是一個有效的整數。

Answer 1

這很簡單。作爲docs for the slider say，值參數必須是一個數字，你有「 - 」。使您的值爲0或只是沒有（例如「」）jsFiddle example。

Answer 2

jQuery滑塊基於整數值工作。當滑塊是「不是整數」時，你想要做什麼？

退房下面的代碼，以保持爲0，如果它不是一個數字，

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

，並在值PARAM，

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

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

DEMO

Answer 3

我的建議是關聯具有「無值」狀態的數字（例如-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> 

DEMO