Slider

An input that allows selecting a value from a range by dragging a handle.

Default

With Label

Combine with a label and display the current value.

With Label

Volume 50%

    <div class="flex justify-between items-center">
  <label for="volume-slider">Volume</label>
  <span><output for="volume-slider">{@volume}</output>%</span>
</div>
<.slider
  id="volume-slider"
  name="volume"
  value={@volume}
  min={0}
  max={100}
/>
  

Custom Range

Configure the range with min, max, and step.

Custom Range

Temperature (0-40°C)

Rating (1-5)

Float Mode

Use a decimal step value for floating-point precision.

Float Mode

Opacity 0.75

Disabled

Use the disabled attribute to prevent interaction.

Disabled

Events

Pair the slider with an output element for instant local value display. Use phx-change when the value needs to update LiveView state.

    def handle_event("volume_change", %{"volume" => volume}, socket) do
  {:noreply, assign(socket, volume: String.to_integer(volume))}
end
  