JSFiddle - React, Tailwind, and code Playground

by Ting-Yuan Chang

HTML

<div>
  <input type="range" min="0" max="100" step="10" >
  <datalist id="Z">
    <option>10</option>
    <option>20</option>
    <option>30</option>
    <option>40</option>
    <option>50</option>
    <option>60</option>
    <option>70</option>
    <option>80</option>
    <option>90</option>
    <option>100</option>
    <option>110</option>
  </datalist>
</div>

CSS

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: rgb(255,255,255);
}
input {
  
width: 500px;
}