Forms & inputs

Slider

Pick a number or a range by dragging.

A pointer and keyboard slider writes its hidden input on committed changes. value_text supplies human-readable aria-valuetext; disabled and invalid states remain visible.

Volume

Use Arrow keys, Home, End, PageUp, PageDown, or drag the thumb.

Volume

Disabled

Invalid

Choose a value below 100

API reference

Props and slots, introspected from the component.

Prop	Type	Default	Description
`class`	`any`	`nil`	Extra classes merged onto the root element.
`controlled`	`boolean`	`false`	Server-driven value: `value` is truth, patches flow into the machine.
`description`	`string`	`nil`	Helper text under the label stack.
`disabled`	`boolean`	`false`	Render disabled and non-interactive.
`errors`	`list`	`[]`	Validation messages; derived from field when used.
`field`	`{:struct, Phoenix.HTML.FormField}`	`nil`	Form field; derives id, name, value, and errors.
`id`	`any`	`nil`	Element id. Derived from `field` when omitted; with a bare `name` it falls back to `name` (the id feeds the hook, so it must stay stable — never auto-generated).
`label`	`string`	`nil`	Primary label above the control.
`max`	`any`	`100`	Maximum value.
`min`	`any`	`0`	Minimum value.
`name`	`string`	`nil`	Form input name; derived from field when omitted.
`on_change`	`string`	`nil`	Server event pushed on commit (`lantern:slider:set-value` replies).
`on_change_client`	`string`	`nil`	Bubbling DOM CustomEvent dispatched on commit.
`size`	`xs \| sm \| md \| lg \| xl`	`"md"`	Field density / type scale.
`step`	`any`	`1`	Step increment; PageUp/PageDown jump 10 steps.
`sublabel`	`string`	`nil`	Secondary label line under the primary label.
`value`	`any`	`nil`	Current value; clamped to min..max, defaults to min.
`value_text`	`string`	`nil`	Template for `aria-valuetext`; `{value}` interpolates, e.g. "{value}%".