<div class="frame">
<div class="range">
<input type="range" min="0" max="40">
</div>
</div>
.frame {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
border-radius: 2px;
box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1);
overflow: hidden;
background: #ff7043;
color: #333;
font-family: "Open Sans", Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: flex;
align-items: center;
justify-content: center;
}
.range {
background: #fff;
height: 2rem;
width: 55%;
border-radius: 5rem;
box-shadow: 1px 5px 5px rgba(black, 0.3);
display: flex;
align-items: center;
justify-content: center;
}
input[type="range"] {
-webkit-appearance: none;
width: 80%;
height: 100%;
background: transparent;
&:focus {
outline: none;
}
//WEBKIT
&::-webkit-slider-thumb {
-webkit-appearance: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: #ffffff;
margin-top: -5px;
box-shadow: 1px 1px 2px rgba(#000, 0.5);
cursor: pointer;
}
&::-webkit-slider-runnable-track {
width: 60%;
height: 9px;
background: #bdbdbd;
border-radius: 3rem;
transition: all 0.5s;
cursor: pointer;
}
&:hover::-webkit-slider-runnable-track {
background: #ff6e40;
}
// IE
&::-ms-track {
width: 60%;
cursor: pointer;
height: 9px;
transition: all 0.5s;
/* Hides the slider so custom styles can be added */
background: transparent;
border-color: transparent;
color: transparent;
}
&::-ms-thumb {
height: 16px;
width: 16px;
border-radius: 50%;
background: #ffffff;
margin-top: -5px;
box-shadow: 1px 1px 2px rgba(#000, 0.5);
cursor: pointer;
}
&::-ms-fill-lower {
background: #bdbdbd;
border-radius: 3rem;
}
&:focus::-ms-fill-lower {
background: #ff6e40;
}
&::-ms-fill-upper {
background: #bdbdbd;
border-radius: 3rem;
}
&:focus::-ms-fill-upper {
background: #ff6e40;
}
//FIREFOX
&::-moz-range-thumb {
height: 16px;
width: 16px;
border-radius: 50%;
background: #ffffff;
margin-top: -5px;
box-shadow: 1px 1px 2px rgba(#000, 0.5);
cursor: pointer;
}
&::-moz-range-track {
width: 60%;
height: 9px;
background: #bdbdbd;
border-radius: 3rem;
transition: all 0.5s;
cursor: pointer;
}
&:hover::-moz-range-track {
background: #ff6e40;
}
}
View Compiled
// jQuery v3.3.1 is supported
This Pen doesn't use any external CSS resources.