ここでjQuery UI Sliderプラグインに問題があります。私が達成しようとしているのは、データベースにスライダーの値がない場合、それはまだ評価がないことを意味するので、「値なし」や「Nil」などを表示したいということです。問題は、その値が整数でない場合、スライダー ハンドルを移動できないことです。ここでデモを見ることができます。
なぜこれが起こっているのか、何が間違っているのか、値が有効な整数でない場合にスライダーを動かせないのはなぜですか。
ここでjQuery UI Sliderプラグインに問題があります。私が達成しようとしているのは、データベースにスライダーの値がない場合、それはまだ評価がないことを意味するので、「値なし」や「Nil」などを表示したいということです。問題は、その値が整数でない場合、スライダー ハンドルを移動できないことです。ここでデモを見ることができます。
なぜこれが起こっているのか、何が間違っているのか、値が有効な整数でない場合にスライダーを動かせないのはなぜですか。
とても簡単です。スライダーのドキュメントにあるように、値パラメーターは数値である必要があり、「--」があります。値を 0 または何もしない (例: "") jsFiddle exampleにします。
私の提案は、数値 (-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>
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]")),
...