JSFiddle - React, Tailwind, and code Playground

HTML

<span class="gdas-menu-left"><input type="range" name="gdas-range" class="gdas-range"></span>

CSS

.gdas-range {
  -webkit-appearance: none;
  width: 100%;
  height: 2px;
  background-image: -webkit-linear-gradient(135deg, #7b63f0, #7b63f0, #3ad4c1, #36b7ee, #36b7ee) !important; /* For Chrome and Safari */
  background-image:    -moz-linear-gradient(135deg, #7b63f0, #7b63f0, #3ad4c1, #36b7ee, #36b7ee) !important; /* For old Fx (3.6 to 15) */
  background-image:     -ms-linear-gradient(135deg, #7b63f0, #7b63f0, #3ad4c1, #36b7ee, #36b7ee) !important; /* For pre-releases of IE 10*/
  background-image:      -o-linear-gradient(135deg, #7b63f0, #7b63f0, #3ad4c1, #36b7ee, #36b7ee) !important; /* For old Opera (11.1 to 12.0) */
  background-image:         linear-gradient(135deg, #7b63f0, #7b63f0, #3ad4c1, #36b7ee, #36b7ee) !important; /* Standard syntax; must be last */
  outline: none;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.gdas-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #ddd;
    border: 1px solid #757575;
    border-radius: 50%;
    cursor: pointer;
     background-image: linear-gradient(135deg, #7b63f0, #7b63f0, #3ad4c1, #36b7ee, #36b7ee);
 background-attachment: fixed;
}

.gdas-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #ddd;
    border: 1px solid #757575;
    border-radius: 50%;
    cursor: pointer;
     background-attachment: fixed;
}