Range renders a styled <input type='range'> slider. Set min, max, and step as attributes — they pass through to the native element. Colour variants follow the daisyUI palette.
Basic Range
<div class="w-full max-w-xs mx-auto">
<c-lb.range min="0" max="100" value="40" />
</div>
Color Variants
<div class="flex flex-col gap-2 w-full max-w-xs mx-auto">
<c-lb.range variant="primary" min="0" max="100" value="40" />
<c-lb.range variant="secondary" min="0" max="100" value="50" />
<c-lb.range variant="accent" min="0" max="100" value="60" />
<c-lb.range variant="success" min="0" max="100" value="70" />
<c-lb.range variant="warning" min="0" max="100" value="80" />
<c-lb.range variant="error" min="0" max="100" value="30" />
</div>
Sizes
<div class="flex flex-col gap-2 w-full max-w-xs mx-auto">
<c-lb.range size="xs" min="0" max="100" value="40" />
<c-lb.range size="sm" min="0" max="100" value="50" />
<c-lb.range size="md" min="0" max="100" value="60" />
<c-lb.range size="lg" min="0" max="100" value="70" />
<c-lb.range size="xl" min="0" max="100" value="80" />
</div>
With Steps
|
|
|
|
|
1
2
3
4
5
<div class="w-full max-w-xs mx-auto">
<c-lb.range min="0" max="100" value="25" 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>
API Reference
c-lb.range
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
| class | string | - | No | Additional CSS classes to apply |
| variant |
neutral
primary
secondary
accent
info
success
warning
error
|
- | No | Range color variant |
| size |
xs
sm
md
lg
xl
|
md
|
No | Range size |
| validate | boolean |
False
|
No | Enable validation styling |