Мульті range input на чистому JavaScript та Bootstrap
Мені знадобився для одного проекту multi range input. Іншими словами повзунок з діапазоном. Зазвичай він робиться за допомогою Jquery UI Slider. Але цей проект не використовував JQuery, і чіпляти тільки заради цього функціоналу додаткову бібліотеку не хотілось. Я використав скрипт Slider for Bootstrap трохи його допилявши. Тим більше що сайт був зверстаний на Bootstrap 5, який з цієї версії перестав використовувати JQuery.
1. Що нам потрібно отримати:
2. Робимо верстку та підключаємо сам скрипт. Я додав його с CDN, також він є на Github. Ще зауважу, що в документації вказані версії Bootstrap 3 та 4, але не зважайте на це, на 5-й версії скрипт теж праціє.
<div class="filter__item">
<div class="filter__item--head">
<a class="filter__item--title" data-bs-toggle="collapse" href="#collapseFilter-2" role="button" aria-expanded="false" aria-controls="collapseFilter-2">
<span>Price</span>
</a>
</div>
<div class="filter__item--content collapse show" id="collapseFilter-2">
<div class="filter-price__labels">
<span id="filter-price-min-label"></span>
<span id="filter-price-max-label"></span>
</div>
<div id="filter-price__block" class="filter-price__block">
<input id="filter-price" data-slider-id='filter-price' type="text" data-slider-min="0" data-slider-max="500" data-slider-step="1" data-slider-value="1"/>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/bootstrap-slider.min.js" integrity="sha512-f0VlzJbcEB6KiW8ZVtL+5HWPDyW1+nJEjguZ5IVnSQkvZbwBt2RfCBY0CBO1PsMAqxxrG4Di6TfsCPP3ZRwKpA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/css/bootstrap-slider.min.css" integrity="sha512-3q8fi8M0VS+X/3n64Ndpp6Bit7oXSiyCnzmlx6IDBLGlY5euFySyJ46RUlqIVs0DPCGOypqP8IRk/EyPvU28mQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> |
3. І тепер додаємо трохи JavaScript, щоб все це запрацювало:
//ініціалізуємо слайдер const filterPrice = new Slider("#filter-price", { id: "filter-price", min: 0, max: 500, range: true, value: [0, 500] , }); //передаємо значення діапазону в відповідні блоки та змінюємо їх наживо window.addEventListener('DOMContentLoaded', function() { let rangeMin = document.querySelector('.tooltip-min .tooltip-inner'); let rangeMinBlock = this.document.querySelector('#filter-price-min-label'); rangeMinBlock.textContent = rangeMin.textContent + ' USD'; let rangeMax = document.querySelector('.tooltip-max .tooltip-inner'); let rangeMaxBlock = this.document.querySelector('#filter-price-max-label'); rangeMaxBlock.textContent = rangeMax.textContent + ' USD'; rangeMin.addEventListener('DOMSubtreeModified', function() { rangeMinBlock.textContent = rangeMin.textContent + ' USD'; }) rangeMax.addEventListener('DOMSubtreeModified', function() { rangeMaxBlock.textContent = rangeMax.textContent + ' USD'; }) }) |
4. Ну і додайте відповідний CSS, слайдер чудово кастомізується через стилі.
Немає коментарів.