Range

<div class="range">
  <input type="range" min="0" max="100" value="50" />
</div>

<div class="range color-success">
  <input type="range" min="0" max="100" value="75" />
</div>

<div class="range color-error">
  <input type="range" min="0" max="100" value="25" />
</div>

Requires: ux.min.css

<div class="relative flex items-center w-full h-[2.75rem]">
  <input type="range" min="0" max="100" value="50" class="w-full appearance-none bg-transparent cursor-pointer accent-primary" />
</div>

<div class="relative flex items-center w-full h-[2.75rem]">
  <input type="range" min="0" max="100" value="75" class="w-full appearance-none bg-transparent cursor-pointer accent-success" />
</div>

<div class="relative flex items-center w-full h-[2.75rem]">
  <input type="range" min="0" max="100" value="25" class="w-full appearance-none bg-transparent cursor-pointer accent-error" />
</div>

Requires: tw.min.css

// Basic range needs no JS. For dynamic value display:
const range = document.querySelector('input[type="range"]');
range.addEventListener('input', (e) => {
  document.querySelector('.range-value').textContent = e.target.value;
});

<div class="range range-sm">
  <input type="range" min="0" max="100" value="40" />
</div>
<div class="range">
  <input type="range" min="0" max="100" value="60" />
</div>
<div class="range range-lg">
  <input type="range" min="0" max="100" value="80" />
</div>

Requires: ux.min.css

<div class="relative flex items-center w-full h-[2.75rem]">
  <input type="range" min="0" max="100" value="40" class="w-full appearance-none bg-transparent cursor-pointer h-0.5 accent-primary" />
</div>
<div class="relative flex items-center w-full h-[2.75rem]">
  <input type="range" min="0" max="100" value="60" class="w-full appearance-none bg-transparent cursor-pointer h-1 accent-primary" />
</div>
<div class="relative flex items-center w-full h-[2.75rem]">
  <input type="range" min="0" max="100" value="80" class="w-full appearance-none bg-transparent cursor-pointer h-1.5 accent-primary" />
</div>

Requires: tw.min.css

// No JavaScript required