Headless Slider

Overview of the Phoenix and LiveView Headless Slider Component

The Mishka Chelekom Headless Slider ships zero opinionated styling - only the semantic markup, full WAI-ARIA wiring, pointer drag, and keyboard support (Arrow keys, Shift+Arrow / PageUp/PageDown, Home/End). Pass a single value or a list of values for a range with two or more thumbs; range thumbs respect min_steps_between_values and a configurable thumb_collision behavior. Every part - label, value readout, control, track, indicator, and thumb - is addressable through a *_class attribute, so you style it entirely with your own Tailwind classes while the accessibility and behavior keep working underneath.

**Headless = bring your own design.** The examples below are a faithful port of Base UI's own Slider demos. Copy them, then swap the classes for your design system - the behavior never changes.

Base UI Slider example (Phoenix headless)

Volume

<.slider
  id="slider-hero"
  value={25}
  label="Volume"
  control_class="flex w-56 touch-none items-center py-3 select-none"
  track_class="h-1 w-full bg-neutral-200 select-none dark:bg-neutral-800"
  indicator_class="bg-neutral-950 select-none dark:bg-white"
  thumb_class="size-4 border border-neutral-950 bg-white select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950"
/>

Range Slider

<.slider
  id="slider-range-slider"
  values={[25, 45]}
  thumb_labels={["Minimum value", "Maximum value"]}
  control_class="flex w-56 touch-none items-center py-3 select-none"
  track_class="h-1 w-full bg-neutral-200 select-none dark:bg-neutral-800"
  indicator_class="bg-neutral-950 select-none dark:bg-white"
  thumb_class="size-4 border border-neutral-950 bg-white select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950"
/>

Edge Alignment

Volume

<.slider
  id="slider-edge-alignment"
  value={25}
  label="Volume"
  control_class="flex w-56 touch-none items-center py-3 select-none"
  track_class="h-1 w-full bg-neutral-200 select-none dark:bg-neutral-800"
  indicator_class="bg-neutral-950 select-none dark:bg-white"
  thumb_class="size-4 border border-neutral-950 bg-white select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950"
/>

Vertical

Volume

<.slider
  id="slider-vertical"
  value={35}
  orientation="vertical"
  label="Volume"
  control_class="flex touch-none select-none data-[orientation=vertical]:h-32 data-[orientation=vertical]:px-3"
  track_class="bg-neutral-200 select-none dark:bg-neutral-800 data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1"
  indicator_class="bg-neutral-950 select-none dark:bg-white"
  thumb_class="size-4 border border-neutral-950 bg-white select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950"
/>

Parts & data attributes

Each part carries a stable data-part and a structural chelekom-slider__* class you can target, plus orientation and drag state for styling.

Part	data-part	State / ARIA	Purpose
Root	-	data-orientation, data-dragging, data-disabled	Carries the Slider hook; reads min/max/step/large_step/orientation/format from data-*.
Label	label	-	Accessible label, wired via aria-labelledby.
Value	value	data-orientation	Formatted value readout.
Control	control	data-orientation, data-dragging, data-disabled	Press to jump the nearest thumb; drag to move it.
Track	track	data-orientation	The visual track the thumbs travel along.
Indicator	indicator	data-orientation	The filled interval from the first thumb (or min) to the last.
Thumb	thumb	role="slider", aria-orientation, aria-valuemin, aria-valuemax, aria-valuenow, aria-valuetext, data-index, data-orientation, data-dragging, data-disabled	One per value; contains a hidden input for form submission.
Input	input	-	Hidden value carrier (single → name, range → name[]).

Accessibility

Follows the WAI-ARIA Slider (and multi-thumb) pattern : each thumb is a role="slider" element focusable with Tab. Arrow keys move by step (Up/Right increase), Shift+Arrow or PageUp/PageDown move by large_step, and Home/End jump to the minimum/maximum. Range thumbs keep their configured minimum gap and never cross past each other unexpectedly, per the chosen thumb_collision behavior.

Slider CLI Arguments

Name	Type	Required	Description
id	string	Yes	Unique id; drives the hook and derived label ids.
name	string	No	Name for the hidden form input(s).
min	integer	No	Minimum value. Defaults to 0.
max	integer	No	Maximum value. Defaults to 100.
step	integer	No	Step between values. Defaults to 1.
large_step	integer	No	Step for PageUp/PageDown and Shift+Arrow. Defaults to 10.
min_steps_between_values	integer	No	Minimum gap (in steps) between range thumbs.
value	any	No	Single-thumb value - accepts a Phoenix form value (integer, float or string).
values	list	No	Multi-thumb values (a range; overrides value).
orientation	string	No	horizontal or vertical. Defaults to horizontal.
disabled	boolean	No	Disable interaction (data-disabled).
format	map	No	Intl.NumberFormat options for aria-valuetext and the value readout.
locale	string	No	BCP-47 locale for formatting.
thumb_collision	string	No	push, swap, or none - range collision behavior. Defaults to push.
thumb_labels	list	No	Per-thumb aria-labels (range).
show_value	boolean	No	Render the value readout.
label	string	No	Accessible label.
form	string	No	Form id owning the hidden input(s).
on_change	string	No	LiveView event pushed on change (payload carries the value).
on_commit	string	No	LiveView event pushed on release/keyup (payload carries the value).
*_class	any	No	Per-part classes: class, control_class, track_class, indicator_class, thumb_class.

Name	Type	Options	Recommended?
`--type`	string	slider	Yes
`--only`	string	slider	Yes
`--module`	string	Something	NO

Headless Slider component props

Slider CLI Arguments