Myna UI

Ranges

Basic
<input
  type="range"
  class="h-2 w-full cursor-ew-resize appearance-none rounded-full bg-gray-200 disabled:cursor-not-allowed" />
Disabled
<input
  type="range"
  class="h-2 w-full cursor-ew-resize appearance-none rounded-full bg-gray-200 disabled:cursor-not-allowed"
  disabled />
Min and Max
<div class="mb-1 flex items-center justify-between text-xs font-medium text-gray-500">
  <span>0</span>
  <span>5</span>
</div>
<input
  type="range"
  class="h-2 w-full cursor-ew-resize appearance-none rounded-full bg-gray-200 disabled:cursor-not-allowed"
  min="0"
  max="5" />
0 5
Steps
<div class="mb-1 flex items-center justify-between text-xs font-medium text-gray-500">
  <span>0</span>
  <span>5</span>
</div>
<input
  type="range"
  class="h-2 w-full cursor-ew-resize appearance-none rounded-full bg-gray-200 disabled:cursor-not-allowed"
  min="0"
  max="5"
  step="0.5" />
0 5
With Label
<div>
  <label for="range1" class="text-xs font-medium text-gray-500"> Select Time </label>
  <input
    type="range"
    id="range1"
    class="h-2 w-full cursor-ew-resize appearance-none rounded-full bg-gray-200 disabled:cursor-not-allowed" />
</div>

<div class="flex items-center space-x-4">
  <label for="range2" class="shrink-0 text-xs font-medium text-gray-500"> Select Day </label>
  <input
    type="range"
    id="range2"
    class="h-2 w-full cursor-ew-resize appearance-none rounded-full bg-gray-200 disabled:cursor-not-allowed" />
</div>