An input where the user selects a value from within a given range.

Uses a native <input type="range"> element with custom styling and a colocated JavaScript hook to update the visual progress indicator.

Value Types

The slider automatically determines whether to emit integer or float values based on the step attribute:

• Integer step (e.g., step={1}, step={5}) → emits integers
• Float step (e.g., step={0.1}, step={0.5}) → emits floats with matching precision

Examples

# Basic slider (integer mode)
<.slider id="volume-slider" min={0} max={100} value={50} />

# With label
<label for="volume-slider">Volume</label>
<.slider id="volume-slider" min={0} max={100} value={50} name="volume" />

# Float mode - step determines precision
<.slider
  id="temperature-slider"
  min={-10}
  max={40}
  step={0.5}
  value={20.5}
  name="temperature"
  aria-label="Temperature in Celsius"
/>

# High precision floats
<.slider id="weight" min={0} max={10} step={0.01} value={5.25} />

# Disabled slider
<.slider
  id="brightness-slider"
  min={0}
  max={100}
  value={75}
  disabled
/>

# With value text for screen readers
<.slider
  id="progress-slider"
  min={0}
  max={100}
  value={75}
  aria-valuetext="75 percent complete"
/>

Accessibility

• Uses semantic <input type="range"> element
• Supports aria-label or aria-labelledby for labeling
• Supports aria-valuemin, aria-valuemax, aria-valuenow, aria-valuetext
• Keyboard accessible (Arrow keys, Home, End, Page Up, Page Down)
• Announces value changes to screen readers

Colocated Hook

This component includes a colocated JavaScript hook (.Slider) that updates:

• The visual progress indicator via CSS custom property --slider-value
• The aria-valuenow attribute as the value changes

The hook is automatically available when you import colocated hooks via import { hooks as sutraUiHooks } from "phoenix-colocated/sutra_ui" in your app.js.