Range-slider
//http://refreshless.com/nouislider/ - doc
// bower i --save-dev nouislider
//link(rel="stylesheet", href="bower/nouislider/distribute/nouislider.min.css")
//script(src="bower/nouislider/distribute/nouislider.min.js")
#rangeSlider
.range-slider-val(data-min="150" data-max="2000")
.range-slider-val__el до <span id="range-min"></span> р.
.range-slider-val__el до <span id="range-max"></span> р.
if (document.getElementById('rangeSlider')) {
//расстановка бегунков на средние расстояния
var rangeMinVal = $('.range-slider-val').data('min');
var rangeMaxVal = $('.range-slider-val').data('max');
var rangeTotal = (rangeMaxVal - rangeMinVal);
var rangeStart =rangeMinVal + Math.ceil(rangeTotal/5);
var rangeEnd = rangeMaxVal - Math.ceil(rangeTotal/5);
var slider = document.getElementById('rangeSlider'); //Элемент
//Инициализицая и основные настройки
noUiSlider.create(slider, {
step: 1,
range: {
'min': rangeMinVal,
'max': rangeMaxVal
},
start: [rangeStart, rangeEnd],
connect: true
});
//Вывод изменяемых значений
var paddingMin = document.getElementById('range-min'),
paddingMax = document.getElementById('range-max');
slider.noUiSlider.on('update', function ( values, handle ) {
if ( handle ) {
paddingMax.innerHTML = Math.ceil(values[handle]);//оркугляем до целых
} else {
paddingMin.innerHTML = Math.ceil(values[handle]);
}
});
}