<div class="vertical-slider thin-slider">
<input class="slider-input" type="range" value="50" />
</div>
<div class="vertical-slider">
<input class="slider-input" type="range" value="50" />
</div>
<div class="vertical-slider thick-slider">
<input class="slider-input" type="range" value="50" />
</div>
<div class="horizontal-slider thin-slider">
<input class="slider-input" type="range" value="50" />
</div>
<div class="horizontal-slider">
<input class="slider-input" type="range" value="50" />
</div>
<div class="horizontal-slider thick-slider">
<input class="slider-input" type="range" value="50" />
</div>
.slider-input::-webkit-slider-thumb {
-webkit-appearance: none;
}
.slider-input:focus {
outline: none;
}
.slider-input {
-webkit-appearance: none;
background: transparent;
cursor: pointer;
flex: 1;
font-size: 4em;
line-height: 0;
margin: 0;
overflow:hidden;
position: relative;
}
.vertical-slider,
.horizontal-slider {
align-items: center;
display: flex;
font-size: 1rem;
justify-content: space-between;
position: relative;
}
.vertical-slider {
flex-direction: column;
}
.vertical-slider .slider-input {
-webkit-appearance: slider-vertical;
width: 2em;
}
.slider-input::-webkit-slider-thumb {
font-size: 2em;
overflow: visible;
position:relative;
}
.slider-input::-webkit-slider-thumb:after{
background: rgba(178, 240, 255, 1);
box-shadow: inset .125em .125em .5em rgba(255,255,255,.6),
inset -1em -1em .125em -1em rgba(0,0,0,.5);
content:" ";
position: absolute;
}
.vertical-slider .slider-input::-webkit-slider-thumb:after {
height: 100vh;
margin: 0;
top: 100%;
width: .5em;
}
.vertical-slider .slider-input::-webkit-slider-thumb:before {
-webkit-filter: drop-shadow(.05em .05em .05em rgba(0,0,0,.25));
background-image: url(../images/hex_thumb_white_horz.png);
background-position: center bottom;
background-repeat: no-repeat;
background-size: 1em;
bottom: 0;
content: " ";
height: 100vh;
margin: 0 -.5em;
position: absolute;
width: 1.5em;
z-index: 1;
}
.vertical-slider.thin-slider .slider-input::-webkit-slider-runnable-track {
padding-top: 1.2em;
}
.vertical-slider.thick-slider .slider-input::-webkit-slider-runnable-track {
padding-top: 1.5em;
}
.slider-input::-webkit-slider-runnable-track {
background-color: #222;
box-shadow: inset 0 0 0 .125em rgba(110,110,110,.25),
inset 0 0 .5em .125em rgba(0,0,0,.5);
}
.vertical-slider .slider-input::-webkit-slider-runnable-track {
overflow-y: visible;
padding-top: 1.4em;
width: 1em;
}
.thin-slider {
font-size: .5rem;
}
.thick-slider {
font-size: 1.5rem;
}
.slider-input::-webkit-slider-thumb {
-webkit-appearance: none;
}
.slider-input:focus {
outline: none;
}
.slider-input {
-webkit-appearance: none;
background: transparent;
cursor: pointer;
flex: 1;
font-size: 4em;
line-height: 0;
margin: 0;
overflow:hidden;
position: relative;
}
.vertical-slider,
.horizontal-slider {
align-items: center;
display: flex;
font-size: 1rem;
justify-content: space-between;
position: relative;
}
.horizontal-slider .slider-input {
height: 2em;
padding: .25em 0;
}
.slider-input::-webkit-slider-thumb {
font-size: 2em;
overflow: visible;
position:relative;
}
.slider-input::-webkit-slider-thumb:after{
background: rgba(178, 240, 255, 1);
box-shadow: inset .125em .125em .5em rgba(255,255,255,.6),
inset -1em -1em .125em -1em rgba(0,0,0,.5);
content:" ";
position: absolute;
}
.horizontal-slider .slider-input::-webkit-slider-thumb:after {
height: .5em;
margin: .25em 0;
right: 100%;
width: 100vw;
}
.horizontal-slider .slider-input::-webkit-slider-thumb {
-webkit-filter: drop-shadow(.05em .05em .05em rgba(0,0,0,.25));
background-image: url(../images/hex_thumb_white_vert.png);
background-repeat: no-repeat;
background-size: .85em;
background-position: center;
height: 1em;
margin: -.25em 0;
width: .85em;
}
.slider-input::-webkit-slider-runnable-track {
background-color: #222;
box-shadow: inset 0 0 0 .125em rgba(110,110,110,.25),
inset 0 0 .5em .125em rgba(0,0,0,.5);
}
.horizontal-slider .slider-input::-webkit-slider-runnable-track {
height: 1em;
}
.thin-slider {
font-size: .5rem;
}
.thick-slider {
font-size: 1.5rem;
}
<div class="horizontal-slider thin-slider">
<div class="slider-button less-button"></div>
<input class="slider-input" type="range" value="50" />
<div class="slider-button more-button"></div>
</div>
<div class="horizontal-slider">
<div class="slider-button less-button"></div>
<input class="slider-input" type="range" value="50" />
<div class="slider-button more-button"></div>
</div>
<div class="horizontal-slider thick-slider">
<div class="slider-button less-button"></div>
<input class="slider-input" type="range" value="50" />
<div class="slider-button more-button"></div>
</div>
.slider-button {
align-items: center;
animation: bounceInDown 900ms 200ms ease-in-out both;
background: linear-gradient(#db9604, #915a00);
border: 1px solid rgba(255, 255, 255, .4);
box-shadow: inset 0px 0px 2px 1px #5a3800;
display: flex;
font-size: 4em;
height: 40px;
justify-content: center;
text-align: center;
text-shadow: 1px 1px 3px #444;
width: 40px;
}
.thin-slider .slider-button {
width: 20px;
height: 20px;
}
.thick-slider .slider-button {
width: 60px;
height: 60px;
}
.less-button::after {
content: "\02212";
}
.more-button::after {
content: "\0002b";
}
.less-button::after,
.more-button::after {
color: white;
font-size: 1em;
}
.button-slider .slider-input {
flex: 0 0 82.5%;
}
.button-slider.thin-slider .slider-input {
flex: 0 0 90%;
}
.button-slider.thick-slider .slider-input {
flex: 0 0 75%;
}