HTML Slider: Vertical 2

HTML Slider: Vertical 2

by sundaramkumar

HTML

<input type='range' min='0' max='32' step='1' value='20'/>
<input type='range' min='0' max='32' step='1' value='7'/>
<input type='range' min='0' max='32' step='1' value='5'/>
<input type='range' min='0' max='32' step='1' value='8'/>

CSS

html, body {
  height: 100%;
}

html {
  overflow: hidden;
  min-height: 24.1875em;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  min-width: 24.1875em;
  transform: rotate(-90deg);
}

input[type='range'] {
  align-self: center;
  border: solid 0 transparent;
  border-width: 0 1.25em;
  padding: 0;
  width: 16.125em;
  height: 5.25em;
  opacity: .65;
  background: linear-gradient(90deg, #d5cebc 0.125em, rgba(0, 0, 0, 0) 0.125em) repeat-x 0 2.5em content-box;
  background-size: 0.5em 1em;
  font-size: 1em;
  cursor: pointer;
}
input[type='range'], input[type='range']::-webkit-slider-runnable-track, input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
}
input[type='range']::-webkit-slider-runnable-track {
  position: relative;
  width: 16.125em;
  height: 1.75em;
  background: linear-gradient(#d5cebc, #d5cebc) no-repeat 50% 0;
  background-size: 16.125em 0.375em;
}
input[type='range']::-moz-range-track {
  width: 16.125em;
  height: 1.75em;
  background: linear-gradient(#d5cebc, #d5cebc) no-repeat 50% 0;
  background-size: 16.125em 0.375em;
}
input[type='range']::-ms-track {
  margin-left: 0.625em;
  border: none;
  width: 16.125em;
  height: 1.75em;
  background: linear-gradient(#d5cebc, #d5cebc) no-repeat 50% 0;
  background-size: 16em 0.375em;
  color: transparent;
}
input[type='range']::-moz-range-progress {
  height: 1.75em;
  box-shadow: inset 0 0.375em currentColor;
  background: linear-gradient(90deg, currentColor 0.125em, rgba(0, 0, 0, 0) 0.125em) repeat-x 0 100%;
  background-size: 0.5em 1em;
}
input[type='range']::-ms-fill-lower {
  height: 1.75em;
  box-shadow: inset 0 0.375em currentColor;
  background: linear-gradient(90deg, currentColor 0.125em, rgba(0, 0, 0, 0) 0.125em) repeat-x 0 100%;
  background-size: 0.5em 1em;
}
input[type='range']::-webkit-slider-thumb {
  position: relative;
  margin-left: -0.0625em;
  margin-top: 0.25em;
  border: none;
  border-radius: 50% 50% 0;
 ...