{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "slider",
  "name": "Slider",
  "category": "Forms",
  "description": "A styled native range input with a filled track. Works without JS; mian.js paints the fill in WebKit.",
  "tags": [
    "slider",
    "range",
    "volume",
    "value"
  ],
  "requiresJs": true,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "range slider",
      "price range",
      "volume",
      "numeric range input"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [],
    "avoid": null
  },
  "url": "https://mian.ro/components/slider",
  "markdownUrl": "https://mian.ro/ai/components/slider.md",
  "classes": [
    {
      "name": "mn-slider",
      "description": "On an <input type=\"range\">."
    },
    {
      "name": "<output for>",
      "description": "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": [
    {
      "title": "With readout",
      "description": null,
      "html": "<div class=\"mn-field\" style=\"max-width:24rem\">\n  <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>\n  <input class=\"mn-slider\" id=\"sl-1\" type=\"range\" min=\"0\" max=\"100\" value=\"60\">\n</div>"
    },
    {
      "title": "Colours",
      "description": null,
      "html": "<div class=\"mn-stack\" style=\"max-width:24rem\">\n  <input class=\"mn-slider mn-accent\" type=\"range\" value=\"30\" aria-label=\"Accent\">\n  <input class=\"mn-slider mn-success\" type=\"range\" value=\"70\" aria-label=\"Success\">\n  <input class=\"mn-slider\" type=\"range\" value=\"45\" disabled aria-label=\"Disabled\">\n</div>"
    }
  ],
  "css": ".mn-slider {\n  --_v: 50%;\n  --_on: var(--_c, var(--mn-primary));\n  --_track: 6px; --_thumb: 1.15rem;\n  appearance: none; -webkit-appearance: none;\n  width: 100%; height: var(--_thumb); margin: 0;\n  background: transparent; cursor: pointer;\n}\n.mn-slider::-webkit-slider-runnable-track {\n  height: var(--_track); border-radius: 999px;\n  background: linear-gradient(to right, var(--_on) var(--_v), var(--mn-surface-2) var(--_v));\n  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--mn-input) 60%, transparent);\n}\n.mn-slider::-moz-range-track { height: var(--_track); border-radius: 999px; background: var(--mn-surface-2); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--mn-input) 60%, transparent); }\n.mn-slider::-moz-range-progress { height: var(--_track); border-radius: 999px; background: var(--_on); }\n.mn-slider::-webkit-slider-thumb {\n  -webkit-appearance: none; appearance: none;\n  width: var(--_thumb); height: var(--_thumb); margin-top: calc((var(--_track) - var(--_thumb)) / 2);\n  border-radius: 50%; border: 2px solid var(--_on); background: var(--mn-surface);\n  box-shadow: 0 1px 3px rgb(0 0 0 / .2);\n  transition: transform var(--mn-duration) var(--mn-ease);\n}\n.mn-slider::-moz-range-thumb {\n  width: var(--_thumb); height: var(--_thumb); box-sizing: border-box;\n  border-radius: 50%; border: 2px solid var(--_on); background: var(--mn-surface);\n  box-shadow: 0 1px 3px rgb(0 0 0 / .2);\n}\n.mn-slider:active::-webkit-slider-thumb { transform: scale(1.12); }\n.mn-slider:focus-visible { outline: none; }\n.mn-slider:focus-visible::-webkit-slider-thumb { box-shadow: var(--mn-focus); }\n.mn-slider:focus-visible::-moz-range-thumb { box-shadow: var(--mn-focus); }\n.mn-slider:disabled { opacity: .5; cursor: not-allowed; }",
  "js": "register('slider', (root) => {\n  each(root, '.mn-slider', 'Rng', (r) => {\n    const paint = () => {\n      const min = +r.min || 0, max = r.max === '' ? 100 : +r.max;\n      r.style.setProperty('--_v', ((+r.value - min) / (max - min || 1)) * 100 + '%');\n      const out = r.id && document.querySelector(`output[for~=\"${r.id}\"]`);\n      if (out) out.textContent = r.value;\n    };\n    r.addEventListener('input', paint);\n    paint();\n  });\n});",
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": "https://mian.ro/dist/mian.js",
    "registryItem": "https://mian.ro/r/slider.json"
  }
}