benjaminpalko/.opencode/skills/daisyui/components/range.md
2026-08-11 16:25:07 -04:00

24 lines
698 B
Markdown

### range
Range slider is used to select a value by sliding a handle
[range docs](https://daisyui.com/components/range/)
#### Class names
- component: `range`
- color: `range-neutral`, `range-primary`, `range-secondary`, `range-accent`, `range-success`, `range-warning`, `range-info`, `range-error`
- size: `range-xs`, `range-sm`, `range-md`, `range-lg`, `range-xl`
- direction: `range-vertical` (vertical slider)
#### Syntax
```html
<input type="range" min="0" max="100" value="40" class="range {MODIFIER}" />
```
#### Rules
- {MODIFIER} is optional and can have one of each color/size class names
- For a vertical slider use `range-vertical`
- You must specify `min` and `max` attributes