A dual-handle range slider for selecting a range of values.

Similar to noUiSlider, this component provides two draggable handles to select a minimum and maximum value within a defined range.

Integer vs Float Mode

The step attribute determines the type of values emitted by the slider. This is important for database compatibility (e.g., Postgrex expects matching types).

Integer Mode (default)

When step is an integer (e.g., 1, 5, 10), all values are integers:

# Integer step = integer values
<.range_slider name="price" min={0} max={1000} step={1} value_min={200} value_max={800} />

# Event payload: %{"price_min" => 200, "price_max" => 800}
# Hidden inputs: value="200", value="800"

Float Mode

When step is a float (e.g., 0.1, 0.5, 1.0), all values are floats:

# Float step = float values
<.range_slider name="rating" min={0} max={5} step={0.5} value_min={1.5} value_max={4.0} />

# Event payload: %{"rating_min" => 1.5, "rating_max" => 4.0}
# Hidden inputs: value="1.5", value="4.0"

Choosing the Right Mode

# For integer database columns (e.g., price in cents, age, quantity)
<.range_slider name="price" step={1} ... />      # emits integers

# For float/decimal database columns (e.g., ratings, percentages, weights)
<.range_slider name="rating" step={0.5} ... />   # emits floats

# Want floats but whole number increments? Use a float step like 1.0
<.range_slider name="score" step={1.0} ... />    # emits floats: 1.0, 2.0, 3.0

Examples

# Basic range slider (integer mode, step defaults to 1)
<.range_slider name="price" min={0} max={1000} value_min={200} value_max={800} />

# With step increments (integer mode)
<.range_slider name="age" min={0} max={100} step={5} value_min={20} value_max={60} />

# Float mode with 0.5 increments
<.range_slider name="rating" min={0} max={5} step={0.5} value_min={1.5} value_max={4.0} />

# High precision floats (0.01 increments)
<.range_slider name="weight" min={0} max={10} step={0.01} value_min={2.50} value_max={7.75} />

# With custom formatting for display (does not affect emitted values)
<.range_slider name="price" min={0} max={100} format={&"$#{&1}"} />

# With tooltips (shown on hover/drag)
<.range_slider name="rating" min={1} max={10} value_min={3} value_max={8} tooltips />

# Emit events while dragging (debounced)
<.range_slider name="budget" min={0} max={10000} on_slide="budget_slide" debounce={100} />

# Emit event only on release
<.range_slider name="budget" min={0} max={10000} on_change="budget_changed" />

# Disabled state
<.range_slider name="locked" min={0} max={100} value_min={25} value_max={75} disabled />

Pips (Scale Markers)

Display scale markers below the slider track using the pips attribute:

# Default pips at 0%, 25%, 50%, 75%, 100%
<.range_slider name="price" min={0} max={100} pips />

# Custom percentage positions
<.range_slider name="price" min={0} max={1000} pips={%{mode: :positions, values: [0, 50, 100]}} />

# Fixed count of evenly distributed pips
<.range_slider name="price" min={0} max={100} pips={%{mode: :count, count: 5}} />

# Pip at each step value (good for small ranges)
<.range_slider name="rating" min={1} max={5} step={1} pips={%{mode: :steps}} />

# Pips at specific values
<.range_slider name="price" min={0} max={1000} pips={%{mode: :values, values: [0, 250, 500, 1000]}} />

Event Payloads

The slider emits events via on_slide (during drag) and on_change (on release). The payload type matches the step type:

# Integer step (step={1}, step={5}, etc.)
def handle_event("price_changed", %{"price_min" => 200, "price_max" => 800}, socket)

# Float step (step={0.5}, step={0.1}, etc.)
def handle_event("rating_changed", %{"rating_min" => 1.5, "rating_max" => 4.0}, socket)

Form Integration

The component renders two hidden inputs:

• {name}_min - The minimum selected value
• {name}_max - The maximum selected value

These are automatically submitted with forms. The value type matches the step type.

Setting Values from Server

The slider automatically syncs with server-pushed values via the updated() hook. Simply update the assigns and the slider will reflect the new values.

Accessibility

• Full keyboard support: Tab to focus, Arrow keys to adjust values
• ARIA attributes for screen readers
• Visible focus states
• Touch-friendly handle sizes