{
  "name": "slider",
  "displayName": "Slider",
  "type": "shadow",
  "isCustomElement": true,
  "tag": "l-slider",
  "nativeTag": null,
  "selector": "l-slider",
  "subItemOf": null,
  "summary": "Pick a numeric value or a min–max range by dragging a thumb.",
  "status": "stable",
  "appearances": [],
  "import": {
    "css": "luxen-ui/css/slider",
    "js": "luxen-ui/slider"
  },
  "properties": [
    {
      "name": "min",
      "attribute": "min",
      "type": "number",
      "default": "0",
      "reflects": true,
      "description": "Minimum value."
    },
    {
      "name": "max",
      "attribute": "max",
      "type": "number",
      "default": "100",
      "reflects": true,
      "description": "Maximum value."
    },
    {
      "name": "step",
      "attribute": "step",
      "type": "number",
      "default": "1",
      "reflects": true,
      "description": "Step increment."
    },
    {
      "name": "value",
      "attribute": "value",
      "type": "number",
      "default": "0",
      "reflects": true,
      "description": "Single-thumb value."
    },
    {
      "name": "range",
      "attribute": "range",
      "type": "boolean",
      "default": "false",
      "reflects": true,
      "description": "Enable a two-thumb min–max range."
    },
    {
      "name": "minValue",
      "attribute": "min-value",
      "type": "number",
      "default": "0",
      "reflects": true,
      "description": "Lower value (range mode)."
    },
    {
      "name": "maxValue",
      "attribute": "max-value",
      "type": "number",
      "default": "100",
      "reflects": true,
      "description": "Upper value (range mode)."
    },
    {
      "name": "label",
      "attribute": "label",
      "type": "string",
      "default": "''",
      "reflects": false,
      "description": "Accessible label for the slider (and base for the range thumbs' names)."
    },
    {
      "name": "size",
      "attribute": "size",
      "type": "SliderSize",
      "default": "'md'",
      "reflects": true,
      "description": "Control size."
    },
    {
      "name": "orientation",
      "attribute": "orientation",
      "type": "SliderOrientation",
      "default": "'horizontal'",
      "reflects": true,
      "description": "Layout axis. Vertical sliders increase upward."
    },
    {
      "name": "withTooltip",
      "attribute": "with-tooltip",
      "type": "boolean",
      "default": "false",
      "reflects": true,
      "description": "Show a tooltip with the current value while a thumb is focused or dragged."
    },
    {
      "name": "valueFormatter",
      "attribute": null,
      "type": "(value: number) => string | undefined",
      "default": null,
      "reflects": false,
      "description": "Formats a value for the tooltip and the `aria-valuetext` announcement.\nAssign a function `(value: number) => string`, e.g. to add a unit or currency."
    },
    {
      "name": "values",
      "attribute": null,
      "type": "number[]",
      "default": null,
      "reflects": false,
      "description": "Current thumb values, low to high."
    }
  ],
  "attributes": [],
  "events": [
    {
      "name": "input",
      "description": "Fired continuously while a thumb moves. Bubbles. Not cancelable. Properties: `value: number`, `values: number[]`.",
      "cancelable": false
    },
    {
      "name": "change",
      "description": "Fired when a thumb is released. Bubbles. Not cancelable. Properties: `value: number`, `values: number[]`.",
      "cancelable": false
    }
  ],
  "methods": [
    {
      "name": "formResetCallback",
      "params": [],
      "returns": null,
      "description": ""
    },
    {
      "name": "formStateRestoreCallback",
      "params": [
        {
          "name": "state",
          "type": "string"
        }
      ],
      "returns": null,
      "description": ""
    }
  ],
  "slots": [],
  "cssClasses": [],
  "cssParts": [
    {
      "name": "base",
      "description": "The slider container."
    },
    {
      "name": "track",
      "description": "The full-width rail."
    },
    {
      "name": "indicator",
      "description": "The filled portion of the rail."
    },
    {
      "name": "thumb",
      "description": "Each draggable thumb."
    },
    {
      "name": "tooltip",
      "description": "The value tooltip shown above a thumb when `with-tooltip` is set."
    }
  ],
  "cssProperties": [
    {
      "name": "--track-size",
      "default": null,
      "description": "Thickness of the rail."
    },
    {
      "name": "--thumb-size",
      "default": null,
      "description": "Diameter of each thumb."
    },
    {
      "name": "--track-color",
      "default": null,
      "description": "Color of the unfilled rail."
    },
    {
      "name": "--indicator-color",
      "default": null,
      "description": "Color of the filled portion."
    },
    {
      "name": "--thumb-color",
      "default": null,
      "description": "Background color of the thumbs."
    }
  ],
  "commands": [],
  "examples": [
    {
      "title": null,
      "language": "html",
      "code": "<l-slider label=\"Volume\" min=\"0\" max=\"100\" value=\"40\" name=\"volume\"></l-slider>"
    },
    {
      "title": "Range (min–max)",
      "language": "html",
      "code": "```html\n<l-slider label=\"Price\" range min=\"0\" max=\"100\" min-value=\"20\" max-value=\"70\" name=\"price\"></l-slider>\n```"
    }
  ]
}