Salad UI

Slider

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 :value param.

Default slider with custom min/max values Open in playground

<.form class="w-full" phx-change="validate">
  <.slider
    id="slider-single-default-slider"
    max={50}
    min={10}
    name="scale"
    value={20}
    class="w-[60%]"
  />
</.form>

Slider with custom step value of 5 Open in playground

<.form class="w-full" phx-change="validate">
  <.slider
    id="slider-single-step-slider"
    max={50}
    name="amount"
    value={20}
    class="w-[60%]"
    step={5}
  />
</.form>

Disabled slider Open in playground

<.form class="w-full" phx-change="validate">
  <.slider
    disabled
    id="slider-single-disabled-slider"
    name="disabled-slider"
    value={30}
    class="w-[60%]"
  />
</.form>

Slider with value change event handler Open in playground

<.form class="w-full" phx-change="validate">
  <.slider
    id="slider-single-event-slider"
    max={100}
    min={0}
    name="volume"
    value={50}
    class="w-[60%]"
    on-value-changed="handle_slider_change"
  />
</.form>