Range slider

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

Class name
Type
range Component Range input
range-primary
Modifier
Adds `primary` to range
range-secondary
Modifier
Adds `secondary` to range
range-accent
Modifier
Adds `accent` to range
range-success
Modifier
Adds `success` to range
range-warning
Modifier
Adds `warning` to range
range-info
Modifier
Adds `info` to range
range-error
Modifier
Adds `error` to range
range-lg
Responsive
Large range
range-md
Responsive
Medium range (default)
range-sm
Responsive
Small range
range-xs
Responsive
Extra small range
# Range
# With steps and measure
| | | | |
# Primary color
# Secondary color
# Accent color
# Success color
# Warning color
# Info color
# Error color
# Sizes
# Range with custom color
Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
Do you like daisyUI? tweet about it!
Support daisyUI's development: Open Collective
daisyUI store

New template: SaaS Landing page

Available on daisyUI store

More details