Готовый код для быстрой реализации объекта Bootstrap Range Slider для вашего сайта. Скопируйте указанный код в том же порядке, в нужные разделы стилей на хостинге и внедряйте адаптивные элементы современного дизайна в несколько кликов. Вместе с готовым HTML/CSS/JavaScript кодом, предлагаем вам самостоятельно оценить готовую демонстрационную версию элемента на нашем сайте.
Используйте слайдеры Bootstrap для:
- Создания фильтров товаров в Интерент-магазине;
- В онлайн калькуляторах и формах;
- Для отображения изменения цены и характеристик;
Готовый код CSS для Range Slider Style
.demo{ background-color: #00b894; } .range-slider{ padding: 35px 0 0; } .range-slider input[type="range"]{ background: #fff; width: calc(100% - (85px)); height: 10px; border: 1px solid #ddd; border-radius: 5px; outline: none; float: left; -webkit-appearance: none; position: relative; } .range-slider input[type="range"]::-webkit-slider-thumb{ background-color: transparent; width: 45px; height: 45px; border-radius: 50%; box-shadow: 0 0 2px rgba(0, 0, 0, 0.8), 0 0 5px #000 inset; cursor: pointer; transition: all 0.15s ease-in-out 0s; -webkit-appearance: none; appearance: none; } .range-slider input[type="range"]::-webkit-slider-thumb:hover, .range-slider input[type="range"]:active::-webkit-slider-thumb{ box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.8), 0 0 5px #000 inset; } .range-slider input[type="range"]::-moz-range-thumb{ background-color: transparent; width: 45px; height: 45px; cursor: pointer; border-radius: 50%; border: none; box-shadow: 0 0 2px rgba(0, 0, 0, 0.8), 0 0 5px #000 inset; transition: all 0.15s ease-in-out 0s; } .range-slider input[type="range"]::-moz-range-thumb:hover, .range-slider input[type="range"]:active::-moz-range-thumb{ box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.8), 0 0 5px #000 inset; } .range-slider .range-value{ color: #00b894; background: #fff; font-size: 20px; font-weight: 600; text-align: center; width: 60px; padding: 5px 8px; margin-left: 10px; display: inline-block; position: relative; top: -15px; -webkit-clip-path: polygon(0% 15%, 19% 21%, 15% 0%, 85% 0%, 78% 21%, 100% 15%, 100% 85%, 78% 79%, 85% 100%, 15% 100%, 19% 79%, 0% 85%); clip-path: polygon(0% 15%, 19% 21%, 15% 0%, 85% 0%, 78% 21%, 100% 15%, 100% 85%, 78% 79%, 85% 100%, 15% 100%, 19% 79%, 0% 85%); } ::-moz-range-track{ background: transparent; border: 0; }
Готовый код HTML для Range Slider Style
<div class="demo"> <div class="range-slider"> <input type="range" value="150" min="0" max="500" range="true"> <span class="range-value">150</span> </div> </div>
Готовый код и библиотеки JavaScript для Range Slider Style
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script> $(document).ready(function(){ var rangeSlider = function(){ var slider = $('.range-slider'), range = $('.range-slider input[type="range"]'), value = $('.range-value'); slider.each(function(){ value.each(function(){ var value = $(this).prev().attr('value'); $(this).html(value); }); range.on('input', function(){ $(this).next(value).html(this.value); }); }); }; rangeSlider(); });