Slider
Slider component for selecting a numeric value within a range with visual feedback.
Basic Slider
50
75
25
<.slider label="Volume" value={50} />
<.slider label="Brightness" value={75} />
<.slider label="Opacity" value={25} />
Custom Range
20
500
3
<.slider label="Temperature (°C)" value={20} min={-10} max={40} />
<.slider label="Price Range ($)" value={500} min={0} max={1000} step={50} />
<.slider label="Rating" value={3} min={1} max={5} step={1} />
Without Value Display
<.slider label="Volume" value={50} show_value={false} />
<.slider label="Speed" value={60} show_value={false} />
With Validation
50
This field is required
30
Adjust the slider to set your preferred value
50
<.slider label="Required Value" value={50} error="This field is required" />
<.slider label="Value with Helper" value={30} helper="Adjust the slider to set your preferred value" />
<.slider label="Disabled Slider" value={50} disabled={true} />
With Form Field
When used with a form field, the slider integrates with Phoenix forms:
50
<.form for={@form} phx-change="validate" phx-submit="save">
<.slider label="Volume" field={@form[:volume]} />
<.button type="submit">Save</.button>
</.form>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| field | Phoenix.HTML.FormField | - | Form field struct from to_form/2 |
| label | string | nil | Label text displayed above the slider |
| value | integer | 50 | Current slider value |
| min | integer | 0 | Minimum selectable value |
| max | integer | 100 | Maximum selectable value |
| step | integer | 1 | Step increment for slider value |
| error | string | nil | Error message to display |
| helper | string | nil | Helper text displayed below the slider |
| disabled | boolean | false | Disable the slider |
| show_value | boolean | true | Show current value next to the slider |