JSFiddle - React, Tailwind, and code Playground

by Amanda Williamson

HTML

<input type='range'/>

CSS

html { background: #e6450f; }

input[type='range'] {
  box-sizing: border-box;
  overflow: visible;
  position: absolute;
  -webkit-appearance: none;
  top: 50%; left: 50%;
  width: 21em; height: 3em;
  padding: 0 .5em;
  transform: translate(-50%, -50%);
  background: transparent;
  background-size: 10% .5em;
}

input[type="range"]::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    box-sizing: border-box;
    width: 20em; height: 1em;
    border-radius: .5em;
    transform: translateY(-1px);
    box-shadow: 0 1px #fc7444;
    font-size: 1em;
    background-image: 
      linear-gradient(#ecebe9, #ecebe9), 
      linear-gradient(#9b2f0b, #bc3c0f);
    background-repeat: no-repeat;
    background-size: 50% 100%, 100% 100%;
  }

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    margin-top: -.25em; /*  Chrome */
   box-sizing: border-box;
   z-index: 1;
   width: 1.5em; height: 1.5em;
   border-radius: 50%;
   box-shadow: 0 1px .125em rgba(#ae725a, .2);
   background: #eae9ea;
  }