Есть два input range
(посмотреть можно тут)
$(document).ready(function(){
$('#range').on('change', function(){
$('#tmbVal').text($(this).val());
});
$('#range2').on('change', function(){
$('#tmbVal2').text($(this).val());
});
});
input[type=range] {
-webkit-appearance: none;
margin: 10px 0;
width: 100%;
}
input[type=range]:focus {
outline: none;
}
/* Полоса range */
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 7px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
background: #9bbedc;
border-radius: 50px;
border: 0px solid #000101;
}
/* Тумблер */
input[type=range]::-webkit-slider-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 1px solid #7ca5c7;
height: 20px;
width: 20px;
border-radius: 10px;
background: #fff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -6.6px;
}
/* Фокус на полосу range */
input[type=range]:focus::-webkit-slider-runnable-track {
background: #7ca5c7;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 7px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
background: #000;
border-radius: 25px;
border: 0px solid #000101;
}
input[type=range]::-moz-range-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 20px;
width: 20px;
border-radius: 10px;
background: #65001c;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 7px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
border-width: 39px 0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #ac51b5;
border: 0px solid #000101;
border-radius: 50px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
background: #ac51b5;
border: 0px solid #000101;
border-radius: 50px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 20px;
width: 20px;
border-radius: 10px;
background: #65001c;
cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
background: #ac51b5;
}
input[type=range]:focus::-ms-fill-upper {
background: #ac51b5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4">
<input id="range" type="range" min="0" max="100" step="1" value="0">
<div id="tmbVal">0</div>
</div>
<div class="col-md-4">
<input id="range2" type="range" min="0" max="100" step="1" value="0">
<div id="tmbVal2">0</div>
</div>
</div>
</div>
Подскажите пожалуйста, как из двух сделать один input range с двумя тумблерами? Заранее всем большое спасибо за помощь!
div, span
элементов. Там необходимо скачать файл с темой ( на сайте есть), либо можете сами написать стили, либо стащить стиль со страницы демо