# Slider · MIAN

A styled native range input with a filled track. Works without JS; mian.js paints the fill in WebKit.

- Id: `slider` · Category: Forms · Needs mian.js: yes · License: MIAN License (free to use)
- Docs: https://mian.ro/components/slider
- Use for: range slider, price range, volume, numeric range input.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>
```

## Classes

- `mn-slider`: On an <input type="range">.
- `<output for>`: Optional live readout: mian.js keeps it in sync.

## Accessibility

- Native range semantics: arrow keys, Page Up/Down, Home/End. Label it and add aria-valuetext when the number needs a unit.

## Examples

### With readout

```html
<div class="mn-field" style="max-width:24rem">
  <div class="mn-row" style="justify-content:space-between"><label class="mn-label" for="sl-1">Volume</label><output class="mn-muted mn-small" for="sl-1">60</output></div>
  <input class="mn-slider" id="sl-1" type="range" min="0" max="100" value="60">
</div>
```

### Colours

```html
<div class="mn-stack" style="max-width:24rem">
  <input class="mn-slider mn-accent" type="range" value="30" aria-label="Accent">
  <input class="mn-slider mn-success" type="range" value="70" aria-label="Success">
  <input class="mn-slider" type="range" value="45" disabled aria-label="Disabled">
</div>
```

## Source

Already inside mian.css and mian.js; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/slider/source