Igor710, ваш код только для Google Chrome
<!DOCTYPE html><html class=''>
<head>
<meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="canonical" href="http://codepen.io/imakhortykh/pen/PGENKL" />
<style class="cp-pen-styles">input[type=range]{
box-sizing:border-box;
appearance:none;width:400px;
margin:0;
padding:0 2px;overflow:hidden;
border:0;
border-radius:10px;
outline:0;
background:linear-gradient(grey,grey) center no-repeat;
background-size:100% 2px;
pointer-events:none;
}
input[type=range]:active,input[type=range]:focus{outline:0}input[type=range]::-webkit-slider-thumb{
height:28px;
width:28px;
border-radius:28px;
background-color:#fff;
position:relative;
margin:5px 0;cursor:pointer;
appearance:none;pointer-events:all;
box-shadow:0 1px 4px .5px rgba(0,0,0,.25);
z-index:99;
}
input[type=range]::-webkit-slider-thumb::before{
content:' ';
display:block;
position:absolute;
top:13px;left:100%;
width:2000px;height:2px;
}
.multi-range{
position:relative;
height:50px;
}
.multi-range input[type=range]{
position:absolute;
}
.multi-range input[type=range]:nth-child(1)::-webkit-slider-thumb::before{
background-color:red;
}
.multi-range input[type=range]:nth-child(2){
background:0 0;
}
.multi-range input[type=range]:nth-child(2)::-webkit-slider-thumb::before{
background-color:grey;
}</style></head><body>
<span class="multi-range">
<input type="range" min="0" max="100000" value="5" id="lower" >
<input type="range" min="0" max="100000" value="95000" id="upper" >
</span><br><br>
<br><br><br>
<br><br><br><br>
<input id="one"><input id="two">
<script>
var lowerSlider = document.querySelector('#lower'),
upperSlider = document.querySelector('#upper'),
lowerVal = parseInt(lowerSlider.value);
upperVal = parseInt(upperSlider.value);
upperSlider.oninput = function () {
lowerVal = parseInt(lowerSlider.value);
upperVal = parseInt(upperSlider.value);
if (upperVal < lowerVal + 4) {
lowerSlider.value = upperVal - 4;
if (lowerVal == lowerSlider.min) {
upperSlider.value = 4;
}
}
document.querySelector('#two').value=this.value
};
lowerSlider.oninput = function () {
lowerVal = parseInt(lowerSlider.value);
upperVal = parseInt(upperSlider.value);
if (lowerVal > upperVal - 4) {
upperSlider.value = lowerVal + 4;
if (upperVal == upperSlider.max) {
lowerSlider.value = parseInt(upperSlider.max) - 4;
}
}
document.querySelector('#one').value=this.value
};
</script>
</body></html>
