Вывод двух значений из одного noUISlider

Я хотел бы вывести два значения из одного диапазона noUIslider. Используя примеры в документации noUIslider, я дошел до того, что могу вывести одно и то же значение дважды, но я хочу, чтобы один из выходов показывал значение, которое было передано через математическое уравнение (например, * 2 или / 3), поэтому что он показывает другой вывод.

Мои возможности javaScript/jQuery слабы, поэтому, пожалуйста, будьте терпеливы со мной.

// Setting up the slider
var tooltipSlider = document.getElementById('slider-tooltip');

noUiSlider.create(tooltipSlider, {
  start: [40000],
  step: 10000,
  range: {
      'min': 40000,
      'max': 5000000
  },
  format: wNumb({
      decimals: 3,
      thousand: '.',
      prefix: '£ ',
  })
});


var tipHandles = tooltipSlider.getElementsByClassName('noUi-handle'),
  tooltips = [];

// Add divs to the slider handles.
for (var i = 0; i < tipHandles.length; i++) {
  tooltips[0] = document.createElement('div');
  tipHandles[0].appendChild(tooltips[0]);
}

// Add a class for styling
tooltips[0].className += 'score';
// Add additional markup
tooltips[0].innerHTML = '<strong>Price </strong><span></span>';
// Replace the tooltip reference with the span we just added
tooltips[0] = tooltips[0].getElementsByTagName('span')[0];

// When the slider changes, write the value to the tooltips.
tooltipSlider.noUiSlider.on('update', function (values, handle) {
  tooltips[handle].innerHTML = values[handle];
});

// When the slider changes, write the value again + maths
var rangeSliderValueElement = document.getElementById('slider-range-  value');

tooltipSlider.noUiSlider.on('update', function (values, handle) {
  rangeSliderValueElement.innerHTML = 'Price + Math: ' + values[handle];
});

Я настроил JSFiddle из того, что у меня есть: https://jsfiddle.net/jherit/qhgd9to0/1/


person jherit    schedule 25.09.2015    source источник


Ответы (1)


Я думаю, что вы не можете делать расчеты, потому что у вас есть префикс

prefix: '£ '

Если вы удалите префикс, вы получите числовое значение и сможете выполнять с ним вычисления.

https://jsfiddle.net/qhgd9to0/3/

person sourcx    schedule 02.10.2015