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

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

由于值完全不同，我希望当滑块到达最左侧（即开始）时，计数器 1 变为 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 是正确的，您是根据滑块移动添加值，而不考虑它移动了多远。因此，您只需要跟踪滑块位置并从中计算出苹果和橙子的值。这是您需要的代码和 fiddle 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));

});

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

Slider with one handle - Updating two values

javascript

jquery

nouislider