不能移动滑块如果值不是整数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