input[type='range'] {
  outline: none;
  display: block;
  margin: 0 auto;
  border: none;
  padding: 0;
  width: 20em;
  height: 2em;
  background: transparent;
  font: inherit;
  cursor: pointer;
  /* slider components */
}
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 {
  border: none;
  height: 1em;
  border-radius: 0.5em;
  box-shadow: inset -.1em .2em .2em #DCD8D5,  inset 1px -1px 1px #FFF;
  background: #F0F0F0;
}
input[type='range']::-moz-range-track {
  border: none;
  height: 1em;
  border-radius: 0.5em;
  box-shadow: inset -.1em .2em .2em #DCD8D5,  inset 1px -1px 1px #FFF;
  background: #F0F0F0;
}
input[type='range']::-ms-track {
  border: none;
  height: 1em;
  border-radius: 0.5em;
  box-shadow: inset -.1em .2em .2em #DCD8D5,  inset 1px -1px 1px #FFF;
  background: #F0F0F0;
  color: transparent;
}
input[type='range']::-ms-fill-lower, input[type='range']::-ms-fill-upper, input[type='range']::-ms-tooltip {
  display: none;
}
input[type='range']::-webkit-slider-thumb {
  margin-top: -0.4em;
  border: none;
  width: 1.8em;
  height: 1.8em;
  border-radius: 50%;
  background: -webkit-radial-gradient(at 80% 50%, #fcfcfc, rgba(252, 252, 252, 0) 70%) no-repeat 100% 50%, -webkit-radial-gradient(at 50% 50%, #fcfcfc, rgba(252, 252, 252, 0) 70%) no-repeat -65% 90%, -webkit-radial-gradient(rgba(244, 244, 244, 0) 32%, #ffffff 35%), -webkit-linear-gradient(0deg, #F4F4F4, #fff) no-repeat 50% 50%;
  background: radial-gradient(at 80% 50%, #fcfcfc, rgba(252, 252, 252, 0) 70%) no-repeat 100% 50%, radial-gradient(at 50% 50%, #fcfcfc, rgba(252, 252, 252, 0) 70%) no-repeat -65% 90%, radial-gradient(rgba(244, 244, 244, 0) 32%, #ffffff 35%), linear-gradient(90deg, #F4F4F4, #fff) no-repeat 50% 50%;
  background-size: 35% 65%, 65% 65%, 100% 100%, 65% 65%;
  box-shadow: 0 .2em .2em #777;
}
input[type='range']::-moz-range-thumb {
  border: none;
  width: 1.8em;
  height: 1.8em;
  border-radius: 50%;
  background: radial-gradient(at 80% 50%, #fcfcfc, rgba(252, 252, 252, 0) 70%) no-repeat 100% 50%, radial-gradient(at 50% 50%, #fcfcfc, rgba(252, 252, 252, 0) 70%) no-repeat -65% 90%, radial-gradient(rgba(244, 244, 244, 0) 32%, #ffffff 35%), linear-gradient(90deg, #F4F4F4, #fff) no-repeat 50% 50%;
  background-size: 35% 65%, 65% 65%, 100% 100%, 65% 65%;
  box-shadow: 0 .2em .2em #777;
}
input[type='range']::-ms-thumb {
  border: none;
  width: 1.8em;
  height: 1.8em;
  border-radius: 50%;
  background: radial-gradient(at 80% 50%, #fcfcfc, rgba(252, 252, 252, 0) 70%) no-repeat 100% 50%, radial-gradient(at 50% 50%, #fcfcfc, rgba(252, 252, 252, 0) 70%) no-repeat -65% 90%, radial-gradient(rgba(244, 244, 244, 0) 32%, #ffffff 35%), linear-gradient(90deg, #F4F4F4, #fff) no-repeat 50% 50%;
  background-size: 35% 65%, 65% 65%, 100% 100%, 65% 65%;
  box-shadow: 0 .2em .2em #777;
}
input[type='range'] /deep/ #track {
  position: relative;
}
input[type='range'] /deep/ #track:before {
  position: absolute;
  top: -0.5em;
  right: 100%;
  -webkit-transform: translate(50%) rotate(90deg) translate(0, 50%) scale(0.8);
      -ms-transform: translate(50%) rotate(90deg) translate(0, 50%) scale(0.8);
          transform: translate(50%) rotate(90deg) translate(0, 50%) scale(0.8);
  color: #676672;
  font-weight: 900;
  text-shadow: 0 -1px #000;
  white-space: nowrap;
  font: 1em/2 verdana, sans-serif;
}