Salad UI

Slider

Renders a slider component.

Read more Read less

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.
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>