Отрицательные диапазоны портят noUiSlider

Ниже показано, как я использую 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();

javascript nouislider
person YepNamesJames    schedule 08.10.2015    source источник
comment
noUIslider работает с неотрицательными значениями. Таким образом, вы, вероятно, захотите удалить часть format в своем коде javascrpt, чтобы он мог принимать отрицательные значения.   -  person Ajay Kulkarni    schedule 09.10.2015
comment
@AjayKulkarni, вы с Фрэнком справились. Спасибо!   -  person YepNamesJames    schedule 09.10.2015

Ответы (2)


arrow_upward
4
arrow_downward

Я могу подтвердить, что ваш код работает только с неотрицательными значениями ползунка.

Хотя, если вы удалите часть формата в своем инициализаторе, он также будет работать с отрицательными числами :)

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

С уважением, Фрэнк

person sourcx    schedule 09.10.2015

arrow_upward
0
arrow_downward

В качестве альтернативы, если вам нужно форматирование, убедитесь, что функция «от» возвращает число. Ему передается строка, но если вы возвращаете число, он снова работает с отрицательными значениями. (Функции «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);
  }
}
person Karim Ayachi    schedule 18.10.2017