Slider

New

A range input component for selecting a numeric value within a defined minimum–maximum boundary. Supports labels, hints, error messages, colour variants, and size variants. Built on DaisyUI's range utilities.

API Reference

Attribute	Description	Type	Default
`id`	HTML `id` attribute forwarded to the `<input>` and linked from the label's `for`	string	`""`
`name`	Form field name	string	`""`
`value`	Initial value of the range input	string	`""`
`min`	Minimum selectable value	string	`0`
`max`	Maximum selectable value	string	`100`
`step`	Granularity of selectable values	string	`""`
`size`	Track and thumb size variant	string	`md`
`color`	Colour theme applied to the filled track and thumb	string	`""`
`disabled`	Disables interaction with the slider	boolean	`False`
`label`	When set, renders a `<label>` above the input	string	`""`
`hint`	Helper text displayed below the input (suppressed when `error` is set)	string	`""`
`error`	Error message displayed below the input in `text-error`	string	`""`

size

xs sm md lg xl

color

neutral primary secondary accent info success warning error

Label requirement: every range input must have an accessible name. Either pass a label prop (which renders a linked <label> via the id prop) or add aria-label="…" directly on the component.

Value announcement: browsers announce the current numeric value automatically. For custom formatting (e.g. "40 %"), add aria-valuetext via Alpine.js or a server binding.

Keyboard: range inputs are natively keyboard-accessible. Arrow keys adjust the value by one step; Home and End jump to the minimum and maximum.

Examples

Basic Slider

<c-slider class="w-full max-w-xs" aria-label="Volume" />

With Label and Hint

Volume

Adjust the playback volume (0–100).

<c-slider
  id="volume"
  label="Volume"
  hint="Adjust the playback volume (0–100)."
  value="40"
  class="w-full max-w-xs"
/>

Error State

Alert Threshold

Value must be between 10 and 90.

<c-slider
  id="threshold"
  label="Alert Threshold"
  error="Value must be between 10 and 90."
  value="5"
  color="error"
  class="w-full max-w-xs"
/>

Colour Variants

<c-slider color="primary" value="60" aria-label="Primary" />
<c-slider color="secondary" value="45" aria-label="Secondary" />
<c-slider color="accent" value="75" aria-label="Accent" />
<c-slider color="success" value="90" aria-label="Success" />
<c-slider color="warning" value="30" aria-label="Warning" />
<c-slider color="error" value="15" aria-label="Error" />

Size Variants

<c-slider size="xs" color="primary" value="50" aria-label="Extra small" />
<c-slider size="sm" color="primary" value="50" aria-label="Small" />
<c-slider size="md" color="primary" value="50" aria-label="Medium (default)" />
<c-slider size="lg" color="primary" value="50" aria-label="Large" />
<c-slider size="xl" color="primary" value="50" aria-label="Extra large" />