View Source SaladUI.Slider (SaladUI v1.0.0-beta.3)
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={JS.push("volume_changed")} />
<.slider id="price-range" min={10} max={1000} step={10} value={500} class="w-[300px]" />
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.
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.