Javascript 带一个控制柄的滑块-更新两个值

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

这是我正在使用的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();;
});

由于值完全不同，我希望当滑块移到最左边时，例如开始，计数器1变为0，计数器2变为200

如果滑块移到最右侧，即末端计数器1变为2.0，计数器2变为0

计数器1步骤为0.10，计数器2步骤为1

我的解决办法是给我一个负数，而我无法得到最终的数字

---

我还为此创建了一个新的变量。

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

---

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

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

---

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

Ben West正确地说，您是基于滑块移动添加值，而不考虑滑块移动的距离。因此，您只需跟踪滑块位置，并根据该位置计算苹果和橙子的值。这是你需要的代码和小提琴

---

Ben West是正确的，您添加的值基于滑块移动，而不考虑其移动的距离。因此，您只需跟踪滑块位置，并根据该位置计算苹果和橙子的值。这是你需要的代码和小提琴

---

我不认为你理解我的问题，计数器1和计数器2的工作方式不同，如果计数器1增加，那么计数器2减少，反之亦然。它们都使用不同的步长值进行操作，并且它们的最终值也不同。一个最大值为2.0，另一个最大值为200 slider.noUiSlider.get/50是否为计数器1提供了正确的值？现在忽略该步骤。是的，这确实为我提供了正确的开始或结束值。如何进行其他计算是一个问题。似乎不可能进行计数器2的其他计算，我仍然需要确定滑块是否向左或向右移动，原因是加法或减法。我认为您不理解我的问题，计数器1和计数器2的工作方式不同，如果计数器1增大，则计数器2减小，反之亦然。它们都使用不同的步长值进行操作，并且它们的最终值也不同。一个最大值为2.0，另一个最大值为200 slider.noUiSlider.get/50是否为计数器1提供了正确的值？现在忽略该步骤。是的，这确实为我提供了正确的开始或结束值。如何进行其他计算是个问题。似乎不可能进行计数器2的其他计算，我仍然需要确定滑块是否向左或向右移动，这是加法或减法的原因

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));

});