JSFiddle - React, Tailwind, and code Playground

by Alon Rotem

HTML

<input type="range" value="20">

CSS

html {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Work Sans", sans-serif;
  text-align: center;
}

input[type=range] {
  outline: 0;
  border: 0;
  border-radius: 20px;
  width: 200px;
  max-width: 100%;
  transition: box-shadow 0.2s ease-in-out;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
 input[type=range] {
    overflow: hidden;
    height: 20px;
    -webkit-appearance: none;
    background-color: #ddd;
  }
 input[type=range]::-webkit-slider-runnable-track {
    height: 40px;
    -webkit-appearance: none;
    color: yellow;
    -webkit-transition: box-shadow 0.2s ease-in-out;
    transition: box-shadow 0.2s ease-in-out;
  }
 input[type=range]::-webkit-slider-thumb {
    width: 40px;
    -webkit-appearance: none;
    height: 40px;
    cursor: ew-resize;
    background: #fff;
    box-shadow: -340px 0 0 320px #1597ff, inset 0 0 0 40px #1597ff;
    border-radius: 50%;
    -webkit-transition: box-shadow 0.2s ease-in-out;
    /*transition: box-shadow 0.2s ease-in-out;*/
    position: relative;
  }
  input[type=range]:active::-webkit-slider-thumb {
    background: #fff;
    box-shadow: -340px 0 0 320px #1597ff, inset 0 0 0 3px #1597ff;
  }
}
input[type=range]::-moz-range-progress {
  background-color: #43e5f7;
}
input[type=range]::-moz-range-track {
  background-color: #9a905d;
}
input[type=range]::-ms-fill-lower {
  background-color: #43e5f7;
}
input[type=range]::-ms-fill-upper {
  background-color: #9a905d;
}