# `PhiaUi.Components.Slider`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/inputs/slider.ex#L1)

Range slider component for continuous numeric value selection.

`slider/1` is a CSS-only `input[type=range]` with semantic Tailwind tokens and
full WAI-ARIA attributes. `form_slider/1` integrates it with `Phoenix.HTML.FormField`
and Ecto changesets, adding label, description, and error display.

No JavaScript is required — the browser handles all drag, click, and keyboard
interaction natively.

## Enhancements

- `marks` — renders tick marks + labels below the track at specified values
- `vertical` — rotates the slider 90° for vertical orientation
- `show_value` — renders a badge above the thumb showing the current value

## Examples

    <%!-- Basic slider --%>
    <.slider value={50} phx-change="update_value" name="value" />

    <%!-- With marks --%>
    <.slider value={@speed} min={0} max={100} step={25}
             marks={[%{value: 0, label: "Slow"}, %{value: 100, label: "Fast"}]}
             phx-change="set_speed" name="speed" />

    <%!-- Vertical orientation --%>
    <.slider value={@vol} vertical={true} phx-change="set_vol" name="vol" />

    <%!-- Show current value badge --%>
    <.slider value={@size} min={8} max={72} show_value={true} phx-change="set_size" name="size" />

# `form_slider`

Renders a form-integrated slider with label, description, and changeset errors.

## Attributes

* `field` (`Phoenix.HTML.FormField`) (required) - A `Phoenix.HTML.FormField` struct.
* `label` (`:string`) - Text rendered in a `<label>` above the slider. Defaults to `nil`.
* `description` (`:string`) - Helper text rendered below the label. Defaults to `nil`.
* `min` (`:integer`) - Minimum allowed value. Defaults to `0`.
* `max` (`:integer`) - Maximum allowed value. Defaults to `100`.
* `step` (`:integer`) - Step increment between valid values. Defaults to `1`.
* `marks` (`:list`) - List of tick mark maps: `[%{value: N, label: "text"}]`. Defaults to `[]`.
* `vertical` (`:boolean`) - Vertical orientation. Defaults to `false`.
* `show_value` (`:boolean`) - Show current value badge above thumb. Defaults to `false`.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the `<input>` element. Supports all globals plus: `["phx-change", "phx-blur", "phx-debounce", "disabled"]`.

# `slider`

Renders a range slider input.

When `marks`, `vertical`, or `show_value` are used the slider is wrapped in
a positioned `<div>` container. Otherwise a bare `<input>` is rendered
(backward-compatible with existing usage).

## Attributes

* `value` (`:integer`) - The current value of the slider. Defaults to `0`.
* `min` (`:integer`) - Minimum allowed value. Defaults to `0`.
* `max` (`:integer`) - Maximum allowed value. Defaults to `100`.
* `step` (`:integer`) - Step increment between valid values. Defaults to `1`.
* `disabled` (`:boolean`) - When `true`, disables the slider. Defaults to `false`.
* `marks` (`:list`) - List of tick mark maps: `[%{value: 0, label: "Min"}, %{value: 100, label: "Max"}]`.
  Marks are positioned below the track at their corresponding percentage.

  Defaults to `[]`.
* `vertical` (`:boolean`) - When `true`, renders the slider in vertical orientation (rotated 90°). Defaults to `false`.
* `show_value` (`:boolean`) - When `true`, renders a badge above the thumb showing the current value. Defaults to `false`.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the `<input>` element. Supports all globals plus: `["phx-change", "phx-blur", "name", "id"]`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*