JSFiddle - React, Tailwind, and code Playground

by Ting-Yuan Chang

HTML

<div class="range-slider">
                    <input class="contentWidth" type="range" min="0" max="10" 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>
</datalist>
                    <div class="range-slider-bar"></div>
                </div>

SCSS

$tSize: 20px;
.range-slider {
    background: linear-gradient(to right, #ccc 1px, transparent 1px) repeat-x;
    background-size: calc( (100% - #{$tSize / 2}) / 10);
    background-position-x: $tSize / 2 - 1;
    position: relative;
    &-bar {
      position: absolute;
      z-index: -1;
      top: 10px;
      bottom: 0px;
      left: $tSize / 2;
      right: $tSize / 2;
      background: pink;
    }
}

input[type=range] {
  width: 100%;
  cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 30px;
  background: #4CAF50;
  cursor: pointer;
  opacity: .5;
}
.slider::-moz-range-thumb {
  width: 30px;
  height: 30px;
  background: #4CAF50;
  cursor: pointer;
}