2012-02-18 7 views
0

jQuery UI Sliderプラグインで問題が発生しました。私が達成しようとしているのは、データベースにスライダの値がない場合、それはまだ格付けがないことを意味するので、「値なし」または「無」などの何かを表示したいと考えています。問題は、その値が整数でない場合、私はスライダーハンドルを移動できないということです。 DEMO HEREを表示できます。値が整数でない場合スライダを移動できませんjquery ui slider

なぜこのようなことが起こっているのですか。私は間違ったことを考えています。値が有効な整数でない場合、スライダーを移動できません。

答えて

0

jQueryスライダは整数値に基づいて動作します。スライダーが「整数でない」ときに何をしたいですか?

私の提案を関連付けることで、

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

と値PARAMで、それが数でない場合は0に滞在する

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

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

DEMO

0

を以下のコードをチェックアウト「値なし」の状態(たとえば-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

関連する問題