I have an input[type=range] element which is customized using CSS to look more modern. I'm unhappy with my CSS because of the need to use position:relative on the wrapping element and position:absolute on an invisible range input.I'm wondering if I made this logic unnecessarily convoluted. Is there a way to achieve the same presentation in a simpler manner? Maybe just by customize the input itself instead of hiding and emulating it?Here's a JSFiddle and here is the accompanying CSS and HTML:<div class=time-progress>    <div class=time-elapsed time-label>        01:47    </div>    <div class=time-slider>        <div class=progress style=width: 49.537037037037%;></div>        <input class=time-range type=range />    </div>    <div class=duration time-label>        03:36    </div></div>*, *:before, *:after {    box-sizing: border-box;}input:focus, button:focus {    outline: none }.time-progress {    display: flex;    align-items: center;    width: 300px;    margin-top: 30px;    margin-left: 30px;}.time-label {    margin: 0 5px;}.time-slider {    background: #ebebeb;    height: 3px;    flex: 1;    margin: 0 10px;    position: relative;}.progress {    background: #4ea6ea;    height: 100%;}.time-range {    bottom: -1px;    position: absolute;    width: 100%;}input[type=range] {    -webkit-appearance: none;    background: transparent;    height: 1px;}input[type=range]::-webkit-slider-thumb {    -webkit-appearance: none;    box-shadow: 0 0 5px #666666;    background: #666666;    border-radius: 100%;    height: 10px;    width: 10px;}
Stylish range input, Google Chrome only
html;css;google chrome