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 numeric mode used by the slider. pushEvent payloads use numbers in that mode; hidden form inputs use the matching string representation, as normal HTML inputs do.

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} />

# pushEvent 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} />

# pushEvent 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" min={0} max={1000} step={1} />      # integer mode

# For float/decimal database columns (e.g., ratings, percentages, weights)
<.range_slider name="rating" min={0} max={5} step={0.5} />   # float mode

# Want floats but whole number increments? Use a float step like 1.0
<.range_slider name="score" min={0} max={10} step={1.0} />    # float mode: 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 pushEvent payload uses integer or float numbers based on the step:

# 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. Values are strings, as with all HTML inputs, but they are formatted according to the step mode.

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

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