javascript - 负范围搞乱了 noUiSlider

Question

下面是我对 noUiSlider 的使用，我喜欢它，因为它缺少 jQuery。但是，每当我使用从负数开始的范围时， slider 的设置功能似乎就会被破坏。我假设这是 noUiSlider 的一个实际问题，但很想检查我没有犯错。

代码笔:

http://codepen.io/anon/pen/avpvVz

依赖:

https://github.com/leongersen/noUiSlider

HTML:

<div class="slider" start="10" range="-50, 50" step="1"></div>
<br>
<br>
<br>
<div class="slider" start="0, 50" range="-100, 100" step="1"></div>

JS:

var sliders = document.getElementsByClassName('slider');
var countSliderUpdates = 0;
var countSliderUpdatesRan = 0;

function updateTextValue(maxLabel, minLabel) {
  return function (values, handle) {
    countSliderUpdatesRan = countSliderUpdatesRan + 1;
    if (countSliderUpdatesRan > countSliderUpdates) {
      maxLabel.parentNode.classList.remove("text--before");
    };
    if ( handle ) {
      maxLabel.value = values[handle];
    } else {
      minLabel.value = values[handle];
    }
  }
}

function updateSliderValue(minLabel, maxLabel, slider) {
  return function (values, handle) {

    maxLabel.parentNode.classList.remove("text--before");
    slider.noUiSlider.set([Number(maxLabel.value), Number(minLabel.value)]); 
  }
}

var styleSliders = function() {
  var sliderLabels = [];
  var sliderLabelsMin = [];
  var sliderLabelsMax = [];
  for (var i = 0; i < sliders.length; ++i) {
    sliders[i].classList.add("text--before");
    var start = sliders[i].getAttribute('start');
    var range;
    var step = undefined;
    if(sliders[i].getAttribute('range')) {
      range = JSON.parse('[' + sliders[i].getAttribute('range') + ']');
    } else if(start.indexOf(',') > -1) {
      range = JSON.parse("[" + start + "]");
    } else {
      range = [0, Number(start)];
    };
    console.log(range);
    var connect = 'lower';
    if (start.indexOf(',') > -1) {
      start = JSON.parse("[" + start + "]");
      connect = true;
    }
    if(sliders[i].getAttribute('step')) {
      step = Number(sliders[i].getAttribute('step'));
    };
    noUiSlider.create(sliders[i], {
      start: start,
      connect: connect,
      range: {
        'min': range[0],
        'max': range[1]
      },
      step: step,
      format: {
        to: function ( value ) {
          return value;
        },
        from: function ( value ) {
          return value;
        }
      }
    });

    if (start.constructor === Array) {
      sliderLabelsMin[i] = document.createElement('input');
      sliderLabelsMin[i].type = 'text';
      if (sliders[i].classList.contains('slider--dark')) {
        sliderLabelsMin[i].className = 'text--dark text--slider';
      } else {
        sliderLabelsMin[i].className = 'text--light text--slider';
      }
      sliderLabelsMin[i].title = 'Range Minimum';
      sliderLabelsMin[i].placeholder = 'Range Minimum';
      sliderLabelsMin[i].setAttribute('touched', false);
      sliders[i].appendChild(sliderLabelsMin[i]);

      sliderLabelsMax[i] = document.createElement('input');
      sliderLabelsMax[i].type = 'text';
      if (sliders[i].classList.contains('slider--dark')) {
        sliderLabelsMax[i].className = 'text--dark text--right text--slider';
      } else {
        sliderLabelsMax[i].className = 'text--light text--right text--slider';
      }
      sliderLabelsMax[i].title = 'Range Maximum';
      sliderLabelsMax[i].placeholder = 'Range Maximum';
      sliderLabelsMax[i].setAttribute('touched', false);
      sliders[i].appendChild(sliderLabelsMax[i]);

      countSliderUpdates = countSliderUpdates + 2;

      sliders[i].noUiSlider.on('update', updateTextValue(sliderLabelsMax[i], sliderLabelsMin[i]));

      sliderLabelsMax[i].addEventListener('change', updateSliderValue(sliderLabelsMax[i], sliderLabelsMin[i], sliders[i]));

      sliderLabelsMin[i].addEventListener('change', updateSliderValue(sliderLabelsMax[i], sliderLabelsMin[i], sliders[i]));
    } else {
      sliderLabels[i] = document.createElement('input');
      sliderLabels[i].type = 'text';
      if (sliders[i].classList.contains('slider--dark')) {
        sliderLabels[i].className = 'text--dark text--slider';
      } else {
        sliderLabels[i].className = 'text--light text--slider';
      }
      sliderLabels[i].title = 'Range Amount Choice';
      sliderLabels[i].placeholder = 'Range Amount Choice';
      sliderLabels[i].setAttribute('touched', false);
      sliders[i].appendChild(sliderLabels[i]);

      countSliderUpdates = countSliderUpdates + 1;

      sliders[i].noUiSlider.on('update', updateTextValue(sliderLabels[i], sliderLabels[i]));

      sliderLabels[i].addEventListener('change', updateSliderValue(sliderLabels[i], sliderLabels[i], sliders[i]));
    }
  };
};
styleSliders();

Answer 1

我可以确认您的代码仅适用于非负 slider 值。

不过，如果您在初始化程序中删除格式部分，它也可以处理负数:)

format: {
  to: function ( value ) {
    return value;
  },
  from: function ( value ) {
    return value;
  }
}

问候，弗兰克