1

下面是我对 noUiSlider 的使用，我喜欢它，因为它缺少 jQuery。但是，每当我使用从负数开始的范围时，滑块的设置功能似乎就被破坏了。我假设这是 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();
4

2 回答 2

4

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

但是，如果您删除初始化程序中的格式部分，它也可以使用负数:)

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

问候， 弗兰克

于 2015-10-09T11:55:52.527 回答
0

或者，如果您需要格式化，请确保“来自”函数返回一个数字。它被传递一个字符串，但如果你返回一个数字，它会再次使用负值。（“to”函数传递了一个数字，但您可以让该函数返回一个（格式化的）字符串。

例子：

var useFloat = false;

...

format: {
  to: function (value) {
    return useFloat ? value.toFixed(1) : value.toFixed(0);
  },
  from: function (value) {
    return useFloat ? parseFloat(value) : parseInt(value);
  }
}
于 2017-10-18T10:17:45.003 回答