fantazer
4/12/2016 - 9:19 AM

Range-slider

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]);
			}
		});
	}