Slider
A native range input styled as a track-and-thumb slider, field-aware and accessible.
<.slider></.slider>Examples
Default
A slider at various positions.
<div class="flex flex-col gap-6 w-full max-w-sm">
<.slider
field={Phoenix.Component.to_form(%{"volume" => 20})[:volume]}
aria-label="Low"
/>
<.slider
field={Phoenix.Component.to_form(%{"volume" => 50})[:volume]}
aria-label="Mid"
/>
<.slider
field={Phoenix.Component.to_form(%{"volume" => 80})[:volume]}
aria-label="High"
/>
</div>Disabled
Pass the disabled global to prevent interaction.
<.slider
field={Phoenix.Component.to_form(%{"volume" => 40})[:volume]}
class="w-full max-w-sm"
aria-label="Volume"
disabled
/>Props
| Name | Type | Default | Values |
|---|---|---|---|
| class | :string | ||
| field | {:struct, Phoenix.HTML.FormField} | ||
| max | :integer | 100 | |
| min | :integer | 0 | |
| rest | :global | ||
| step | :integer | 1 |