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

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

Edit this page on GitHub

Sponsors

Make your React site visually editable

Become a sponsor

Sponsors

Make your React site visually editable

Become a sponsor