{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "slider",
  "type": "registry:ui",
  "title": "Slider (MIAN)",
  "description": "A styled native range input with a filled track. Works without JS; mian.js paints the fill in WebKit.",
  "categories": [
    "forms",
    "slider",
    "range",
    "volume",
    "value"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/slider.css",
      "type": "registry:file",
      "target": "mian/components/slider.css",
      "content": ".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; }"
    },
    {
      "path": "mian/examples/slider.html",
      "type": "registry:file",
      "target": "mian/examples/slider.html",
      "content": "<!-- With readout -->\n<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>\n\n<!-- Colours -->\n<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>"
    }
  ],
  "docs": "MIAN components are HTML + CSS classes, not React components. The styles are already included in mian-base; this item adds the component's CSS section and example markup for reference. Docs: https://mian.ro/components/slider",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": true,
      "classes": [
        "mn-slider",
        "<output for>"
      ],
      "accessibility": [
        "Native range semantics: arrow keys, Page Up/Down, Home/End. Label it and add aria-valuetext when the number needs a unit."
      ],
      "intents": [
        "range slider",
        "price range",
        "volume",
        "numeric range input"
      ]
    }
  }
}