Готовый код для быстрой реализации объекта Bootstrap Range Slider для вашего сайта. Скопируйте указанный код в том же порядке, в нужные разделы стилей на хостинге и внедряйте адаптивные элементы современного дизайна в несколько кликов. Вместе с готовым HTML/CSS/JavaScript кодом, предлагаем вам самостоятельно оценить готовую демонстрационную версию элемента на нашем сайте.
Готовый код CSS для Range Slider Style
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
.range-slider{ margin: 20px 0 0 0; } .range-slider input[type="range"]{ background: #36D1DC; width: calc(100% - (85px)); height: 5px; border-radius: 7px; box-shadow: inset 0px 4px 6px -2px rgba(0, 0, 0, 0.5); outline: none; float: left; -webkit-appearance: none; position: relative; } .range-slider input[type="range"]::-webkit-slider-thumb{ background: linear-gradient(45deg,#36D1DC,#5B86E5); width: 23px; height: 23px; border: 2px solid #fff; 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{ transform:rotate(45deg); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); } .range-slider input[type="range"]::-moz-range-thumb{ background:linear-gradient(45deg,#36D1DC,#5B86E5); width: 20px; height: 20px; cursor: pointer; border: 2px solid #fff; border-radius: 0; 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{ transform:rotate(45deg); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); } .range-slider .range-value{ color: #fff; background: #5B86E5; font-size: 18px; font-weight: 600; text-align: center; line-height: 40px; width: 50px; height: 40px; margin-left: 10px; border-radius: 15px; display: inline-block; position: relative; top: -19px; -webkit-clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%); clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%); } ::-moz-range-track{ background: transparent; border: 0; } |
Готовый код HTML для Range Slider Style
|
1 2 3 4 5 6 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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(); }); |