<div class="container">
<div style="padding-bottom:50px;">
<span class="p_name">Strenght</span>
<span class="p_value">910</span><p>
</div>
<input type="range" min="0" max="1000" value="50">
</div>
body{background-color:#141414;font-family: Kanyon;font-weight:300;}
.container{width:1000px;margin: 0 auto;}
.p_name{color:#DFDFDF;font-size:45px;float:left;}
.p_value{color:#DFDFDF;font-size:45px;float:right;}
input[type=range] {
width: 1000px;
appearance: none;
appearance: none;
appearance: none;
}
input[type=range]::slider-runnable-track {
cursor: pointer;
width:1000px;
height: 3px;
background-color: #DFDFDF;
border-radius:10px;
}
input[type=range]::slider-thumb {
height:20px;
width:3px;
background-color: #F92B2B;
border-radius:10px;
appearance: none;
margin-top: -10px;
cursor: pointer;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.