{
  "_copyright": "Copyright (c) 2026, Salesforce, Inc., All rights reserved. For full license text, see the LICENSE.txt file",
  "$schema": "https://slds.lightningdesignsystem.com/schemas/uif-system.v1.json",
  "apiVersion": "1.0.0",
  "name": "Slider",
  "description": "Initializes slider component",
  "structure": {
    "name": "root",
    "restrict": [
      "div"
    ],
    "description": "Initializes slider component",
    "children": [
      {
        "name": "label",
        "restrict": [
          "label"
        ],
        "description": "Form element label associated with the range input",
        "attributes": {
          "bound": {
            "for": {
              "prop": "inputId",
              "required": true
            }
          },
          "static": {
            "class": "slds-form-element__label"
          }
        },
        "children": [
          {
            "name": "sliderLabel",
            "restrict": [
              "span"
            ],
            "description": "Contains the label and range for the slider label - not required",
            "children": [
              {
                "name": "labelText",
                "restrict": [
                  "span"
                ],
                "description": "Contains the label for the slider and adds a hook for adding `.slds-assistive-text` class to visually hide the label, but not the range",
                "slot": {
                  "name": "label",
                  "required": true
                },
                "attributes": {
                  "static": {
                    "class": "slds-slider-label__label"
                  }
                }
              },
              {
                "name": "labelRange",
                "restrict": [
                  "span"
                ],
                "description": "Contains the range for the slider",
                "slot": {
                  "name": "range"
                },
                "attributes": {
                  "static": {
                    "class": "slds-slider-label__range"
                  }
                }
              }
            ],
            "attributes": {
              "static": {
                "class": "slds-slider-label"
              }
            }
          }
        ]
      },
      {
        "name": "sliderContainer",
        "restrict": [
          "div"
        ],
        "description": "Form-element control wrapper for the slider input and any validation message",
        "children": [
          {
            "name": "slider",
            "restrict": [
              "div"
            ],
            "description": "Initializes slider component",
            "children": [
              {
                "name": "input",
                "restrict": [
                  "input"
                ],
                "description": "Range track for slider",
                "attributes": {
                  "static": {
                    "type": "range",
                    "class": "slds-slider__range"
                  },
                  "bound": {
                    "id": {
                      "prop": "inputId",
                      "required": true
                    },
                    "name": {
                      "prop": "name"
                    },
                    "value": {
                      "prop": "value"
                    },
                    "min": {
                      "prop": "min"
                    },
                    "max": {
                      "prop": "max"
                    },
                    "step": {
                      "prop": "step"
                    },
                    "disabled": {
                      "prop": "disabled"
                    },
                    "aria-describedby": {
                      "prop": "ariaDescribedBy"
                    }
                  }
                }
              },
              {
                "name": "value",
                "restrict": [
                  "span"
                ],
                "description": "Element that contains value of input range",
                "attributes": {
                  "static": {
                    "aria-hidden": "true",
                    "class": "slds-slider__value"
                  }
                },
                "slot": {
                  "name": "value"
                }
              }
            ],
            "attributes": {
              "static": {
                "class": "slds-slider"
              }
            },
            "modifiers": [
              {
                "name": "vertical",
                "attribute": "class",
                "value": "slds-slider_vertical",
                "description": "Modifier that makes the slider vertical"
              }
            ],
            "variants": [
              {
                "name": "size",
                "description": "Constrain the slider track width",
                "options": [
                  {
                    "value": "x-small",
                    "class": "slds-size_x-small"
                  },
                  {
                    "value": "small",
                    "class": "slds-size_small"
                  },
                  {
                    "value": "medium",
                    "class": "slds-size_medium"
                  },
                  {
                    "value": "large",
                    "class": "slds-size_large"
                  }
                ]
              }
            ]
          },
          {
            "name": "errorMessage",
            "restrict": [
              "div"
            ],
            "description": "Validation error message",
            "renderWhen": {
              "prop": "hasError",
              "eq": "true"
            },
            "attributes": {
              "bound": {
                "id": {
                  "prop": "errorMessageId"
                }
              },
              "static": {
                "class": "slds-form-element__help"
              }
            },
            "slot": {
              "name": "errorMessage"
            }
          }
        ],
        "attributes": {
          "static": {
            "class": "slds-form-element__control"
          }
        }
      }
    ],
    "attributes": {
      "static": {
        "class": "slds-form-element"
      }
    }
  },
  "states": [
    {
      "name": "disabled",
      "type": "boolean",
      "aria": "aria-disabled",
      "description": "Whether the slider is disabled"
    },
    {
      "name": "hasError",
      "type": "boolean",
      "description": "Whether the slider has a validation error"
    },
    {
      "name": "required",
      "type": "boolean",
      "aria": "aria-required",
      "description": "Whether the slider value is required"
    }
  ],
  "accessibility": {
    "requirements": [
      {
        "id": "label-association",
        "description": "Slider must have an associated label referenced via the input's id"
      },
      {
        "id": "value-announcement",
        "description": "Current value should be announced when changed; the visible value display is aria-hidden because the native range input already exposes the value to assistive tech"
      },
      {
        "id": "error-association",
        "description": "When an error message is present, the input should reference it via aria-describedby"
      }
    ]
  },
  "extensions": {
    "com.salesforce-ux": {
      "dateAdded": "2017-03-01",
      "genReady": false,
      "lbc": "lightning-slider"
    }
  },
  "cssSource": "./slider.css",
  "styleApi": {
    "status": "stable",
    "ready": true
  },
  "stateClasses": [
    {
      "state": "disabled",
      "class": "slds-is-disabled"
    },
    {
      "state": "hasError",
      "class": "slds-has-error"
    }
  ]
}