Я работаю над сайтом, на котором я пытаюсь внедрить слайдер цен. Я работаю с Perch CMS и Creative Tim Material Kit.
Из Creative Tim Kit у меня есть следующий шаблон:
// With help from Javascript the price-left and price-right values get displayed on the website:
$(document).ready(function() {
var slider2 = document.getElementById('sliderRefine');
noUiSlider.create(slider2, {
start: [101, 790],
connect: true,
range: {
'min': [30],
'max': [900]
}
});
var limitFieldMin = document.getElementById('price-left');
var limitFieldMax = document.getElementById('price-right');
slider2.noUiSlider.on('update', function(values, handle) {
if (handle) {
limitFieldMax.innerHTML = $('#price-right').data('currency') + Math.round(values[handle]);
} else {
limitFieldMin.innerHTML = $('#price-left').data('currency') + Math.round(values[handle]);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/11.1.0/nouislider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/11.1.0/nouislider.min.css" />
<div class="card-body card-refine">
<span id="price-left" class="price-left pull-left" data-currency="€"></span>
<span id="price-right" class="price-right pull-right" data-currency="€"></span>
<div class="clearfix"></div>
<div id="sliderRefine" class="slider slider-rose noUi-target noUi-ltr noUi-horizontal"></div>
</div>
Задача ещё не решена.
Других решений пока нет …