Question

我正在使用noUISlider库创建一个滑块，其中一个手柄向上或向下移动并更新两个不同的值。

这是我正在使用的javascript：

var slider = document.getElementById('slider');

var lastValue = 50;

var counter1 = 1.0;
var counter2 = 100;

noUiSlider.create(slider, {
    start: 50,
    step: 2,
    range: {
        'min': 0,
        'max': 100
    }
});

slider.noUiSlider.on('slide', function(){

    //Increase
    if (slider.noUiSlider.get() > lastValue){
    counter1 = counter1 + 0.10;
    counter2 = counter2 - 1;
    $(".counter1").html(counter1.toFixed(1));
    $(".counter2").html(counter2.toFixed(0));
  }

  //decrease
  if (slider.noUiSlider.get() < lastValue){
    counter1 = counter1 - 0.10;
    counter2 = counter2 + 1;

    $(".counter1").html(counter1.toFixed(1));
    $(".counter2").html(counter2.toFixed(0));
  }

  lastValue = slider.noUiSlider.get();;
});

由于这些值完全不同，我希望当滑块到达最左侧（即开始）时，counter1变为0，而计数器2变为200。

如果滑块移动到最右边（即结束），则counter1变为2.0，counter2变为0。

Counter1步数为0.10，counter2步数为1.

我的解决方案是给我负数，我无法得到我的最终数字。

我还在此创建了fiddle。

Answer 1

您只是根据滑块移动的事实添加变量，而不是根据移动的距离添加变量。换句话说，如果我快速移动滑块，你的函数会被调用几次，如果我慢慢移动它会被调用很多次。

当滑块位于左侧时，其值（slider.noUiSlider.get()）为0，当它位于右侧时，它为100.您希望第一个计数器从0变为2，因此只有slider.noUiSlider.get() / 50。看看你是否可以计算出第二个 - 你不需要存储counter1，counter2或lastValue，滑块值就是你所需要的。

Answer 2

Ben West是正确的，您可以根据滑块移动添加值，而不考虑它移动的距离。因此，您只需跟踪滑块位置并从中计算苹果和橙子的值。这是您需要的代码和小提琴https://jsfiddle.net/hbcgdv4q/

var slider = document.getElementById('slider');

noUiSlider.create(slider, {
    start: 100,
    step: 2,
    range: {
        'min': 0,
        'max': 200
    }
});

slider.noUiSlider.on('slide', function(){

  var counter1;
  var counter2;
  var sliderGet;
  sliderGet = slider.noUiSlider.get();

  counter1 = sliderGet/100;
  counter2 = 200 - sliderGet;

  $(".counter1").html(counter1.toFixed(1));
  $(".counter2").html(counter2.toFixed(0));

});

带一个手柄的滑块 - 更新两个值

2 个答案: