JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<div class="sliders">
  <datalist id="marks">
    <option value="25" label="Never"></option>
    <option value="50" label="Not very often"></option>
    <option value="75" label="On occasion"></option>
    <option value="100" label="All the time"></option>
  </datalist>

  <div class="slider-extension">
    <input type="range" step="25" min="25" max="100" list="marks" value="25" />
  </div>

  <div class="slider-extension">
    <input type="range" step="25" min="25" max="100" list="marks" value="50" />
  </div>

  <div class="slider-extension">
    <input type="range" step="25" min="25" max="100" list="marks" value="75" />
  </div>
  
  <div class="slider-extension">
    <input type="range" step="25" min="25" max="100" list="marks" value="100" />
  </div>
</div>

SCSS

.sliders {
  --slider-bg: #ebebeb;
  --slider-fill: #c2c2c2;
  
	display: grid;
  gap: 10px 0;
	grid-template-columns: repeat(4, 1fr);
  justify-items: center;
	width: 500px;

  datalist {
    display: contents;
  }
  
  .slider-extension {
    display: grid;
    width: 82%;
    grid-column: 1 / span 4;
    position: relative;

    &::before, &::after {
      content: "";
      position: absolute;
      background: red;
      width: 10px;
      height: 10px;
      left: -8px;
      top: calc(50% - 5px);
    }
    
    &::before {
      background: var(--slider-fill);
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
    }
    
    &::after {
      background: var(--slider-bg);
      left: auto;
      right: -8px;
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
    }
  }

  input[type=range] {
    appearance: none;
    background: transparent;
    overflow: hidden;
  }

  @function makelongshadow($color, $size) {
    $val: 0 0 0 $size $color;

    @for $i from 15 through 400 {
      $val: #{$val}, -#{$i}px 0 0 $size #{$color};
    }

    @return $val;
  }
  
  @mixin track {
    height: 10px;
    padding: 0 10px;
    background: var(--slider-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMidYMid slice' viewBox='0 0 500 40'%3E%3Cg fill='rgba(0,0,0,0.25)'%3E%3Ccircle r='2.5' cy='20' cx='12.5' /%3E%3Ccircle r='2.5' cy='20' cx='32.5%25' /%3E%3Ccircle r='2.5' cy='20' cx='62.5%25' /%3E%3C/g%3E%3C/svg%3E");
    background-position-x: 10px;
    background-size: 100% 100%;
  }

  input[type=range]::-webkit-slider-runnable-track {
    @include track;
  }
  
  @mixin thumb {
    height: 20px;
    width: 20px;
    background: #005580;
    background-image:...