View Source SaladUI.Slider (SaladUI v1.0.0-beta.2)

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

slider(assigns)

Renders a slider component.

Functions

Link to this function

slider(assigns)

View Source

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 to nil.
  • min (:integer) - Minimum value. Defaults to 0.
  • max (:integer) - Maximum value. Defaults to 100.
  • step (:integer) - Step size for value changes. Defaults to 1.
  • value (:integer) - Current value of the slider. Defaults to nil.
  • default-value (:integer) - Default value if value is not provided. Defaults to nil.
  • disabled (:boolean) - Whether the slider is disabled. Defaults to false.
  • on-value-changed (:any) - Handler for value changed event. Defaults to nil.
  • field (Phoenix.HTML.FormField) - A form field struct retrieved from the form, for example: @form[:volume].
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.