# `LineaUI.Components.Range`
[🔗](https://github.com/devaction-labs/linea_ui/blob/v0.1.1/lib/linea_ui/components/range.ex#L1)

LineOne's range slider: a rounded track with a round thumb in the theme color, in three sizes.

    <.range name="volume" value={50} color="primary" />
    <.range field={@form[:level]} label="Level" min={0} max={10} size="lg" />
    <.range name="opacity" phx-debounce="100" />

It is a native `<input type="range">`, so it submits with its form and fires `phx-change`
as it is dragged.

# `range`

Renders a range slider.
## Attributes

* `field` (`Phoenix.HTML.FormField`) - Defaults to `nil`.
* `id` (`:string`) - Defaults to the field's id.
* `name` (`:string`) - Defaults to the field's name.
* `value` (`:any`)
* `min` (`:any`) - Defaults to `nil`.
* `max` (`:any`) - Defaults to `nil`.
* `step` (`:any`) - Defaults to `nil`.
* `color` (`:string`) - Defaults to `"neutral"`. Must be one of `"neutral"`, `"primary"`, `"secondary"`, `"info"`, `"success"`, `"warning"`, or `"error"`.
* `size` (`:string`) - Defaults to `"md"`. Must be one of `"sm"`, `"md"`, or `"lg"`.
* `label` (`:string`) - The caption. Defaults to `nil`.
* `label_class` (`:any`) - Classes of the caption text. Defaults to `nil`.
* `help` (`:string`) - The small line under the control. Defaults to `nil`.
* `errors` (`:list`) - Messages to show; `field` adds its own once the input was used. Defaults to `[]`.
* `disabled` (`:boolean`) - Defaults to `false`.
* `wrapper_class` (`:any`) - Classes of the outer block (grid placement, spacing). Defaults to `nil`.
* `class` (`:any`) - Defaults to `nil`.
* Global attributes are accepted. Supports all globals plus: `["form", "list"]`.

---

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