javascript - JQuery UI slider 在 0 时不起作用？

Question

我正在尝试在我的 meteor 应用程序中使用 JQuery UI 创建一个 slider ，其可能值介于 0 和 1 之间，步长大小为 0.001，并且我不希望 slider 具有默认值，也不希望显示 slider 的 handle ，直到用户首先决定一个值。

Template.game_task.onCreated(()=>{
    if (!Session.get("sliderValue")){
        Session.setPersistent('sliderValue', -1)
    }

});

Template.game_task.onRendered(()=> {

    /////// the slider stuff //////
    this.$("#slider").slider({
        min: -0.0000,
        max: 1,
        step: 0.01,
        slide: function(event, ui) {
            $('#slider > .ui-slider-handle').show();
            Session.setPersistent('sliderValue',ui.value)
        },
        change: function(event, ui) {
            //save value to collection
        }
    });

    if (Session.get("sliderValue") === -1){
        //if no value is set, then hide the handle
        $('#slider > .ui-slider-handle').hide();
    }

});

Template.game_task.helpers({
    getSliderValue(){
        const sliderValue = Session.get('sliderValue');
        if (sliderValue){
            console.log('slider value to be returned',sliderValue)
            return sliderValue;
        }
    },

});

这是 HTML:

<div class='row'>
    <div id="slider" class="custom-handle"></div>
    <span id="min">0</span>
    <span class="quarter">0.25</span>
    <span class="quarter">0.5</span>
    <span class="quarter">0.75</span>
    <span id="max">1</span>
    <p class="contributionText">Your guess: {{getSliderValue}}</p>
</div>

但是， slider 在下限处表现出奇怪的行为(当我将 slider 拉向 0 时)。当我转到 0 时，我得到较小的值(即 0.01、0.016)，然后我得到的值为 null(根据 {{getSliderValue 中的 getSliderValue() 函数) }})。

所以我永远无法选择 0 .. 尽管当我选择 1 时，这不会发生在高端。

此外，如果我将最小值更改为 0 以外的值，我会在下限处得到正确的行为(但在我的情况下，它必须为 0)。

Answer 1

您的问题出在这段代码中:

if (sliderValue){
  ...
}

由于您的值为0，因此该条件不会为true。您应该将其更改为:

if (sliderValue != null){
  ...
}