JSFiddle - React, Tailwind, and code Playground

HTML

<input  id='slider' type='range' min='0' max='21' step='1' value='0' list="steplist"/>
  <datalist id="steplist">
    <option>0</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
    <option>13</option>
    <option>14</option>
    <option>15</option>
    <option>16</option>
    <option>17</option>
    <option>18</option>
    <option>19</option>
    <option>20</option>
    <option>21</option>

</datalist>

CSS

input[type=range] {
	height: 25px;
	margin: 10px 0;
	width: 100%;
	width: 99.3%;
  
  /* removing this one */
	-webkit-appearance: none;

}
input[type=range]:focus {
	outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
	width: 100%;
	height: 8px;
	cursor: pointer;
	animate: 0.2s;
	box-shadow: 0px 0px 0px #000000;
	background: #1a1e21;
	border-radius: 1px;
	border: 0px solid #000000;

}
input[type=range]::-webkit-slider-thumb {
	box-shadow: 0px 0px 0px #000000;
	border: 1px solid #1a1e21;
	height: 38px;
	width: 38px;
	border-radius: 25px;
	background: #1a1e21;
	cursor: pointer;
	margin-top: -16px;
}


input[type=range]::-webkit-slider-runnable-track {
	width: 100%;
	height: 8px;
	cursor: pointer;
	animate: 0.2s;
	box-shadow: 0px 0px 0px #000000;
	background: #1a1e21;
	border-radius: 1px;
	border: 0px solid #000000;

}
input[type=range]::-webkit-slider-thumb {
	box-shadow: 0px 0px 0px #000000;
	border: 1px solid #1a1e21;
	height: 38px;
	width: 38px;
	border-radius: 25px;
	background: #1a1e21;
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -16px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
	background: #1a1e21;
}
input[type=range]::-moz-range-track {
	width: 100%;
	height: 5px;
	cursor: pointer;
	animate: 0.2s;
	box-shadow: 0px 0px 0px #000000;
	background: #1a1e21;
	border-radius: 1px;
	border: 0px solid #000000;
}
input[type=range]::-moz-range-thumb {
	box-shadow: 0px 0px 0px #000000;
	border: 1px solid #1a1e21;
	height: 28px;
	width: 28px;
	border-radius: 25px;
	background: #1a1e21;
	cursor: pointer;
}
input[type=range]::-ms-track {
	width: 100%;
	height: 5px;
	cursor: pointer;
	animate: 0.2s;
	background: transparent;
	border-color: transparent;
	color: transparent;
}
input[type=range]::-ms-fill-lower {
	background: #2497E3;
	border: 0px solid #000000;
	border-radius: 2px;
	box-shadow: 0px 0px 0px #000000;
}
input[type=range]::-ms-fill-upper {
	background: #2497E3;
	border: 0px solid #000000;
	border-radius:...