Range slider

Range slider is used to select a value by sliding a handle.

Class name
Type
range
Component
For <input type="range"> tag
range-neutral
Color
neutral color
range-primary
Color
primary color
range-secondary
Color
secondary color
range-accent
Color
accent color
range-success
Color
success color
range-warning
Color
warning color
range-info
Color
info color
range-error
Color
error color
range-xs
Size
Extra small size
range-sm
Size
Small size
range-md
Size
Medium size [Default]
range-lg
Size
Large size
range-xl
Size
Extra large size

Range

<input type="range" min="0" max="100" value="40" class="$$range" />
<input type="range" min="0" max="100" value="40" class="$$range" />

With steps and measure

| | | | |
1 2 3 4 5
<div class="w-full max-w-xs">
  <input type="range" min="0" max="100" value="25" class="$$range" step="25" />
  <div class="flex justify-between px-2.5 mt-2 text-xs">
    <span>|</span>
    <span>|</span>
    <span>|</span>
    <span>|</span>
    <span>|</span>
  </div>
  <div class="flex justify-between px-2.5 mt-2 text-xs">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
  </div>
</div>
<div class="w-full max-w-xs">
  <input type="range" min="0" max="100" value="25" class="$$range" step="25" />
  <div class="flex justify-between px-2.5 mt-2 text-xs">
    <span>|</span>
    <span>|</span>
    <span>|</span>
    <span>|</span>
    <span>|</span>
  </div>
  <div class="flex justify-between px-2.5 mt-2 text-xs">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
  </div>
</div>

Neutral color

<input type="range" min="0" max="100" value="40" class="$$range $$range-neutral" />
<input type="range" min="0" max="100" value="40" class="$$range $$range-neutral" />

Primary color

<input type="range" min="0" max="100" value="40" class="$$range $$range-primary" />
<input type="range" min="0" max="100" value="40" class="$$range $$range-primary" />

Secondary color

<input type="range" min="0" max="100" value="40" class="$$range $$range-secondary" />
<input type="range" min="0" max="100" value="40" class="$$range $$range-secondary" />

Accent color

<input type="range" min="0" max="100" value="40" class="$$range $$range-accent" />
<input type="range" min="0" max="100" value="40" class="$$range $$range-accent" />

Success color

<input type="range" min="0" max="100" value="40" class="$$range $$range-success" />
<input type="range" min="0" max="100" value="40" class="$$range $$range-success" />

Warning color

<input type="range" min="0" max="100" value="40" class="$$range $$range-warning" />
<input type="range" min="0" max="100" value="40" class="$$range $$range-warning" />

Info color

<input type="range" min="0" max="100" value="40" class="$$range $$range-info" />
<input type="range" min="0" max="100" value="40" class="$$range $$range-info" />

Error color

<input type="range" min="0" max="100" value="40" class="$$range $$range-error" />
<input type="range" min="0" max="100" value="40" class="$$range $$range-error" />

Sizes

<input type="range" min="0" max="100" value="30" class="$$range $$range-xs" />
<input type="range" min="0" max="100" value="40" class="$$range $$range-sm" />
<input type="range" min="0" max="100" value="50" class="$$range $$range-md" />
<input type="range" min="0" max="100" value="60" class="$$range $$range-lg" />
<input type="range" min="0" max="100" value="70" class="$$range $$range-xl" />
<input type="range" min="0" max="100" value="30" class="$$range $$range-xs" />
<input type="range" min="0" max="100" value="40" class="$$range $$range-sm" />
<input type="range" min="0" max="100" value="50" class="$$range $$range-md" />
<input type="range" min="0" max="100" value="60" class="$$range $$range-lg" />
<input type="range" min="0" max="100" value="70" class="$$range $$range-xl" />

Range with custom color and no fill

<input type="range" min="0" max="100" value="40" 
  class="$$range text-blue-300 [--range-bg:orange] [--range-thumb:blue] [--range-fill:0]" />
<input type="range" min="0" max="100" value="40" 
  class="$$range text-blue-300 [--range-bg:orange] [--range-thumb:blue] [--range-fill:0]" />
Do you have a question? Ask on GitHub or Discord server
Do you see a bug? open an issue on GitHub
Do you like daisyUI? Post about it!
Support daisyUI's development: Open Collective
daisyUI store

Official daisyUI
Figma Library

Available on daisyUI store

More details