Implementation of slider component for selecting values within a range.
Sliders provide users with a visual representation of a value within a range, and allow them to adjust it by dragging a thumb or pressing arrow keys.
Examples:
<.slider id="volume-slider" min={0} max={100} value={50} on-value-changed="volume_changed" />
<.slider id="price-range" min={10} max={1000} step={10} value={500} class="w-[300px]" />Component events
:on-value-changed- Maps thevalue-changedevent. Fired when the slider value changes.
Server commands
"setValue"- Sets the slider value. Requires a:valueparam.
Summary
Functions
Renders a slider component.
Functions
Renders a slider component.
Options
:id- Required unique identifier for the slider.:min- Minimum value (defaults to 0).:max- Maximum value (defaults to 100).:step- Step size for value changes (defaults to 1).:value- Current value of the slider (defaults to min).:default-value- Default value if value is not provided.:disabled- Whether the slider is disabled (defaults to false).:on-value-changed- Handler for value changed event.:class- Additional CSS classes.
Component events
:on-value-changed- Fired when the slider value changes.
Server commands
"setValue"- Sets the slider value. Requires a:valueparam.
Attributes
id(:string) (required) - Unique identifier for the slider.name(:any) - Name of the slider for form submission. Defaults tonil.min(:integer) - Minimum value. Defaults to0.max(:integer) - Maximum value. Defaults to100.step(:integer) - Step size for value changes. Defaults to1.value(:integer) - Current value of the slider. Defaults tonil.default-value(:integer) - Default value if value is not provided. Defaults tonil.disabled(:boolean) - Whether the slider is disabled. Defaults tofalse.on-value-changed(:any) - Handler for value changed event. Defaults tonil.field(Phoenix.HTML.FormField) - A form field struct retrieved from the form, for example: @form[:volume].class(:string) - Defaults tonil.- Global attributes are accepted.