Slider
A styled native range input with a filled track. Works without JS; mian.js paints the fill in WebKit.
With readout
<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
<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>Installation
Everything ships in one stylesheet and one small script. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>Prefer to own the files? /r/slider.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| 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.