# Range

> Source: https://design.nanatec.co.ke/components/range/
> A range/slider component supporting single and dual-thumb selection, vertical orientation, stepped and continuous modes, tooltips, tick marks, and linked numeric inputs.

A range/slider component supporting single and dual-thumb selection, vertical orientation, stepped and continuous modes, tooltips, tick marks, and linked numeric inputs.

## Preview

```html
<nana-range label="Volume" min="0" max="100" value="50" style="min-width:16rem"></nana-range>
```

## Installation

```bash
npm install @nana-tec/ui-components
```

## Import

```js
import "@nana-tec/ui-components/range";
```

## Basic usage

```html
<nana-range label="Volume" min="0" max="100" value="50" style="min-width:16rem"></nana-range>
```

## Sizes

```html
<nana-range min="0" max="100" value="25" size="sm" style="min-width:16rem"></nana-range>
<nana-range min="0" max="100" value="50" size="md" style="min-width:16rem"></nana-range>
```

## Dual, ticks & states

```html
<nana-range min="0" max="100" value="25,75" dual style="min-width:16rem"></nana-range>
<nana-range min="0" max="100" value="50" ticks show-min-max style="min-width:16rem"></nana-range>
<nana-range min="0" max="100" value="40" disabled style="min-width:16rem"></nana-range>
```

## Variants

The `variant` attribute sets the track fill — `default`, `filled`, or `gradient`.

```html
<nana-range min="0" max="100" value="50" variant="default" style="min-width:16rem"></nana-range>
<nana-range min="0" max="100" value="50" variant="filled" style="min-width:16rem"></nana-range>
<nana-range min="0" max="100" value="50" variant="gradient" style="min-width:16rem"></nana-range>
```

## API

## Events

| Event | Type | Description |
|---|---|---|
| `nana-change` | `CustomEvent` | Fired when value settles (`detail.value` — string or \{min, max\}) |
| `nana-input` | `CustomEvent` | Fired while dragging (`detail.value`) |

## Slots

| Slot | Description |
|---|---|
| `(default)` | Custom content (appears below the slider) |
| `prefix` | Content before the slider |
| `suffix` | Content after the slider |

## CSS Variables

| Variable | Default | Description |
|---|---|---|
| `--nana-range-track-height` | — | Track thickness (default: 6px) |
| `--nana-range-thumb-size` | — | Thumb diameter (default: 20px) |
| `--nana-range-track-bg` | — | Track background |
| `--nana-range-fill-bg` | — | Fill colour |
| `--nana-range-thumb-bg` | — | Thumb background |
| `--nana-range-thumb-radius` | — | Thumb shape (default: 50%) |
| `--nana-range-tooltip-bg` | — | Tooltip background |
| `--nana-range-tooltip-color` | — | Tooltip text colour |
| `--nana-range-gradient-from` | — | Gradient start (variant="gradient") |
| `--nana-range-gradient-to` | — | Gradient end (variant="gradient") |

## CSS Parts

| Part | Description |
|---|---|
| `base` | The root container |
| `track` | The track element |
| `fill` | The active fill portion |
| `thumb` | A draggable handle |
| `tooltip` | The value tooltip |

## Accessibility

<ul class="a11y-grid not-content">
  <li>Keyboard accessible</li>
  <li>Screen-reader labels</li>
  <li>Focus-visible states</li>
  <li>ARIA roles and states</li>
  <li>WCAG 2.2 AA contrast</li>
</ul>

## Related components

<ul class="related not-content">
  <li><a href="/components/button/">Button</a></li>
  <li><a href="/components/button-group/">Button Group</a></li>
  <li><a href="/components/icon-button/">Icon Button</a></li>
  <li><a href="/components/input/">Input</a></li>
  <li><a href="/components/textarea/">Textarea</a></li>
</ul>

## Storybook

See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-range--docs