JSFiddle - React, Tailwind, and code Playground

by calder12

HTML

<input type="range" id="difficultSelect" max="3" min="1" value="2"/>

CSS

input[type="range"]{-webkit-appearance: none;
z-index: 102;
width: 225px;
height: 5px;
margin-left: 95px;
margin-top: 15px;
border-radius: 2px;

background: linear-gradient(to right,  #83f922 0%,#ff4c00 100%); 
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#83f922), 
    color-stop(100%,#ff4c00)); 
background: -moz-linear-gradient(left,  #83f922 0%, #ff4c00 100%);
    background: -webkit-linear-gradient(left,  #83f922 0%,#ff4c00 100%);}