<div class="wrap">
<div class="frame">
<div class="center">
<div class="range-box">
<input type="range" min="0" max="100" class="center">
</div>
<div class="range-index-wrap"><span class="range-index">50</span> %</div>
</div>
</div>
</div>
// delete the following line if no text is used
// edit the line if you wanna use other fonts
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");
.wrap {
width: 100vw;
height: 100vh;
background: #643a7a;
}
// use only the available space inside the 400x400 frame
.frame {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
border-radius: 2px;
box-shadow: .5rem .5rem 1rem rgba(0,0,0,0.6);
overflow: hidden;
background: #201c29;
color: #333;
font-family: 'Montserrat', Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: flex;
justify-content: center;
align-items: center;
}
.center {
width: 90%;
height: .2rem;
border-radius: 20px;
}
.range-index-wrap {
color: #f3edf7;
width: 100%;
text-align: center;
padding-top: 2rem;
font-size: 1.5rem;
}
[type=range] {
-webkit-appearance: none;
width: 100%;
height: 3px;
top: 31%;
background: #ad2fed;
}
[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
[type=range]:focus {
outline: none;
}
[type=range]::-ms-track {
width: 100%;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
[type=range]::-webkit-slider-thumb {
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.1);
border: 2px solid #ad2fed;
height: 24px;
width: 24px;
border-radius: 50%;
background: #fff;
cursor: pointer;
position: relative;
top: -10px;
}
[type=range]::-moz-range-thumb {
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.1);
border: 2px solid #ad2fed;
height: 24px;
width: 24px;
border-radius: 50%;
background: #f3edf7;
cursor: pointer;
position: relative;
top: -10px;
}
[type=range]::-ms-thumb {
box-shadow: 0 .1rem .5rem 0 rgba(0, 0, 0, .3);
border: 4px solid #ad2fed;
height: 24px;
width: 24px;
border-radius: 50%;
background: #f3edf7;
cursor: pointer;
position: relative;
top: -10px;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 6px;
cursor: pointer;
box-shadow: 0 .1rem .5rem 0 rgba(0, 0, 0, .3);
background: #ad2fed;
border: none;
border-radius: 5px;
}
[type=range]::-moz-range-track {
width: 100%;
height: 6px;
cursor: pointer;
box-shadow: 0 .1rem .5rem 0 rgba(0, 0, 0, .3);
background: #ad2fed;
border: none;
border-radius: 5px;
}
[type=range]::-ms-track {
width: 100%;
height: 6px;
cursor: pointer;
box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.2);
background: #ad2fed;
border: none;
border-radius: 2px;
}
[type=range]::-ms-fill-lower, [type=range]::-ms-fill-upper {
background: #ad2fed;
border: none;
border-radius: 2px;
box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.2);
}
[type=range]:focus::-ms-fill-lower {
background: #ad2fed;
}
[type=range]:focus::-ms-fill-upper {
background: #ad2fed;
}
[type=range]:focus::-webkit-slider-runnable-track {
background: #ad2fed;
}
View Compiled
// jQuery v3.3.1 is supported
$("[type=range]").on("change ", function() {
$(".range-index").html($(this).val());
});
This Pen doesn't use any external CSS resources.