Range Slider

<.range_slider name="range" />

With Labels

Display the selected range values alongside the slider.

<div class="flex justify-between items-center">
  <label>Price Range</label>
  <span>${@price_min} - ${@price_max}</span>
</div>
<.range_slider
  name="price"
  min={0}
  max={1000}
  step={10}
  value_min={@price_min}
  value_max={@price_max}
  phx-change="price_change"
/>

With Tooltips

Enable tooltips to show values above the handles.

<.range_slider name="with_tips" tooltips value_min={25} value_max={75} />

With Pips

Add tick marks with the pips option.

<.range_slider name="with_pips" pips min={0} max={100} step={10} value_min={20} value_max={80} />

Custom Format

Use the format attribute to customize how values are displayed.

<.range_slider
  name="formatted"
  tooltips
  min={0}
  max={100}
  value_min={30}
  value_max={70}
  format={&"$#{&1}"}
/>\

Disabled

Use the disabled attribute to prevent interaction.

<.range_slider name="disabled" value_min={25} value_max={75} disabled />

Events

The range slider emits events with both min and max values. Use on_slide for real-time updates or on_change for final values.

def handle_event("price_change", %{"price_min" => min, "price_max" => max}, socket) do
  {:noreply,
   assign(socket,
     price_min: String.to_integer(min),
     price_max: String.to_integer(max)
   )}
end

Form Parameters

When used in forms, the range slider submits two parameters: {name}_min and {name}_max .

# For a range slider with name="price"
# Form submission includes:
%{"price_min" => "200", "price_max" => "800"}