-webki slider runnable track
input[type='range'] {
width: 400px;
}
input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type='range']::-webkit-slider-runnable-track {
height: 3px;
background: linear-gradient(to right, #293043, #293043), #D7D7D7;
background-size: var(60%, 0%) 100%;
background-repeat: no-repeat;
border-radius: 5px;
}
input[type='range']::-webkit-slider-thumb {
width: 15px;
height: 15px;
cursor: pointer;
background: #293043;
border: solid white 1px;
border-radius: 50%;
margin-top: -6px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
}
/** FF*/
input[type="range"]::-moz-range-progress {
background-color: #293043;
border-radius: 5px;
}
input[type="range"]::-moz-range-track {
background-color: #D7D7D7;
border-radius: 5px;
}
input[type="range"]::-moz-range-thumb {
width: 15px;
height: 15px;
cursor: pointer;
background: #293043;
border: solid white 1px;
border-radius: 50%;
margin-top: -6px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
}