JSFiddle - React, Tailwind, and code Playground

by Aleksey Vavilov

HTML

<input class="range-style" list="tickmarks" type="range" min="0" max="100" step="1" value="50">

<datalist id="tickmarks">
  <option value="0" label="0">
  <option value="10">
  <option value="20">
  <option value="30">
  <option value="40">
  <option value="50" label="50">
  <option value="60">
  <option value="70">
  <option value="80">
  <option value="90">
  <option value="100" label="100">
</datalist>

CSS

datalist {
 width: 160px;
display: flex;
justify-content: space-between;
}

#tickmarks option {
display: inline;
width: 10px;
font-size: 12px;
}

.range-style {
  -webkit-appearance: none;
	width: 160px;
	height: 2px;
	background: #e4e4e4;
	outline: none;
}

.range-style::-webkit-slider-thumb {
  -webkit-appearance: none;
	width: 12px;
	height: 12px;
	border: 1px solid #dae3ea;
	background: white;
	border-radius: 2px;
	background-repeat: no-repeat;
	background-position: center;
  cursor: pointer;
	transition: all 0.3s;
}