2015-09-25 4 views
1

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

Мои силы 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/

ответ

0

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

prefix: '£ ' 

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

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