react-test/docs/translations/api-docs/slider/slider.json

{
  "componentDescription": "",
  "propDescriptions": {
    "aria-label": { "description": "The label of the slider." },
    "aria-labelledby": {
      "description": "The id of the element containing a label for the slider."
    },
    "aria-valuetext": {
      "description": "A string value that provides a user-friendly name for the current value of the slider."
    },
    "classes": { "description": "Override or extend the styles applied to the component." },
    "color": {
      "description": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the <a href=\"https://mui.com/material-ui/customization/palette/#custom-colors\">palette customization guide</a>."
    },
    "components": { "description": "The components used for each slot inside." },
    "componentsProps": {
      "description": "The extra props for the slot components. You can override the existing props or add new ones."
    },
    "defaultValue": {
      "description": "The default value. Use when the component is not controlled."
    },
    "disabled": { "description": "If <code>true</code>, the component is disabled." },
    "disableSwap": {
      "description": "If <code>true</code>, the active thumb doesn&#39;t swap when moving pointer over a thumb while dragging another thumb."
    },
    "getAriaLabel": {
      "description": "Accepts a function which returns a string value that provides a user-friendly name for the thumb labels of the slider. This is important for screen reader users.",
      "typeDescriptions": {
        "index": { "name": "index", "description": "The thumb label&#39;s index to format." }
      }
    },
    "getAriaValueText": {
      "description": "Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider. This is important for screen reader users.",
      "typeDescriptions": {
        "value": { "name": "value", "description": "The thumb label&#39;s value to format." },
        "index": { "name": "index", "description": "The thumb label&#39;s index to format." }
      }
    },
    "marks": {
      "description": "Marks indicate predetermined values to which the user can move the slider. If <code>true</code> the marks are spaced according the value of the <code>step</code> prop. If an array, it should contain objects with <code>value</code> and an optional <code>label</code> keys."
    },
    "max": {
      "description": "The maximum allowed value of the slider. Should not be equal to min."
    },
    "min": {
      "description": "The minimum allowed value of the slider. Should not be equal to max."
    },
    "name": { "description": "Name attribute of the hidden <code>input</code> element." },
    "onChange": {
      "description": "Callback function that is fired when the slider&#39;s value changed.",
      "typeDescriptions": {
        "event": {
          "name": "event",
          "description": "The event source of the callback. You can pull out the new value by accessing <code>event.target.value</code> (any). <strong>Warning</strong>: This is a generic event not a change event."
        },
        "value": { "name": "value", "description": "The new value." },
        "activeThumb": {
          "name": "activeThumb",
          "description": "Index of the currently moved thumb."
        }
      }
    },
    "onChangeCommitted": {
      "description": "Callback function that is fired when the <code>mouseup</code> is triggered.",
      "typeDescriptions": {
        "event": {
          "name": "event",
          "description": "The event source of the callback. <strong>Warning</strong>: This is a generic event not a change event."
        },
        "value": { "name": "value", "description": "The new value." }
      }
    },
    "orientation": { "description": "The component orientation." },
    "scale": { "description": "A transformation function, to change the scale of the slider." },
    "shiftStep": {
      "description": "The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down."
    },
    "size": { "description": "The size of the slider." },
    "slotProps": { "description": "The props used for each slot inside the Slider." },
    "slots": {
      "description": "The components used for each slot inside the Slider. Either a string to use a HTML element or a component."
    },
    "step": {
      "description": "The granularity with which the slider can step through values. (A &quot;discrete&quot; slider.) The <code>min</code> prop serves as the origin for the valid values. We recommend (max - min) to be evenly divisible by the step.<br>When step is <code>null</code>, the thumb can only be slid onto marks provided with the <code>marks</code> prop."
    },
    "sx": {
      "description": "The system prop that allows defining system overrides as well as additional CSS styles."
    },
    "tabIndex": { "description": "Tab index attribute of the hidden <code>input</code> element." },
    "track": {
      "description": "<p>The track presentation:</p>\n<ul>\n<li><code>normal</code> the track will render a bar representing the slider value.</li>\n<li><code>inverted</code> the track will render a bar representing the remaining slider value.</li>\n<li><code>false</code> the track will render without a bar.</li>\n</ul>\n"
    },
    "value": {
      "description": "The value of the slider. For ranged sliders, provide an array with two values."
    },
    "valueLabelDisplay": {
      "description": "<p>Controls when the value label is displayed:</p>\n<ul>\n<li><code>auto</code> the value label will display when the thumb is hovered or focused.</li>\n<li><code>on</code> will display persistently.</li>\n<li><code>off</code> will never display.</li>\n</ul>\n"
    },
    "valueLabelFormat": {
      "description": "The format function the value label&#39;s value.<br>When a function is provided, it should have the following signature:<br>- {number} value The value label&#39;s value to format - {number} index The value label&#39;s index to format"
    }
  },
  "classDescriptions": {
    "active": {
      "description": "State class applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the thumb element",
      "conditions": "it&#39;s active"
    },
    "colorError": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"error\"</code>"
    },
    "colorInfo": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"info\"</code>"
    },
    "colorPrimary": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"primary\"</code>"
    },
    "colorSecondary": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"secondary\"</code>"
    },
    "colorSuccess": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"success\"</code>"
    },
    "colorWarning": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"warning\"</code>"
    },
    "disabled": {
      "description": "State class applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root and thumb element",
      "conditions": "<code>disabled={true}</code>"
    },
    "dragging": {
      "description": "State class applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root",
      "conditions": "a thumb is being dragged"
    },
    "focusVisible": {
      "description": "State class applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the thumb element",
      "conditions": "keyboard focused"
    },
    "mark": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the mark element" },
    "markActive": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the mark element",
      "conditions": "active (depending on the value)"
    },
    "marked": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>marks</code> is provided with at least one label"
    },
    "markLabel": {
      "description": "Styles applied to {{nodeName}}.",
      "nodeName": "the mark label element"
    },
    "markLabelActive": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the mark label element",
      "conditions": "active (depending on the value)"
    },
    "rail": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the rail element" },
    "root": { "description": "Styles applied to the root element." },
    "sizeSmall": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>size=\"small\"</code>"
    },
    "thumb": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the thumb element" },
    "thumbColorError": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the thumb element",
      "conditions": "<code>color=\"error\"</code>",
      "deprecationInfo": "Combine the <a href=\"/material-ui/api/slider/#slider-classes-MuiSlider-thumb\">.MuiSlider-thumb</a> and <a href=\"/material-ui/api/slider/#slider-classes-MuiSlider-colorError\">.MuiSlider-colorError</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
    },
    "thumbColorInfo": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the thumb element",
      "conditions": "<code>color=\"info\"</code>",
      "deprecationInfo": "Combine the <a href=\"/material-ui/api/slider/#slider-classes-MuiSlider-thumb\">.MuiSlider-thumb</a> and <a href=\"/material-ui/api/slider/#slider-classes-MuiSlider-colorInfo\">.MuiSlider-colorInfo</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
    },
    "thumbColorPrimary": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the thumb element",
      "conditions": "<code>color=\"primary\"</code>",
      "deprecationInfo": "Combine the <a href=\"/material-ui/api/slider/#slider-classes-MuiSlider-thumb\">.MuiSlider-thumb</a> and <a href=\"/material-ui/api/slider/#slider-classes-MuiSlider-colorPrimary\">.MuiSlider-colorPrimary</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
    },
    "thumbColorSecondary": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the thumb element",
      "conditions": "<code>color=\"secondary\"</code>",
      "deprecationInfo": "Combine the <a href=\"/material-ui/api/slider/#slider-classes-MuiSlider-thumb\">.MuiSlider-thumb</a> and <a href=\"/material-ui/api/slider/#slider-classes-MuiSlider-colorSecondary\">.MuiSlider-colorSecondary</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
    },
    "thumbColorSuccess": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the thumb element",
      "conditions": "<code>color=\"success\"</code>",
      "deprecationInfo": "Combine the <a href=\"/material-ui/api/slider/#slider-classes-MuiSlider-thumb\">.MuiSlider-thumb</a> and <a href=\"/material-ui/api/slider/#slider-classes-MuiSlider-colorSuccess\">.MuiSlider-colorSuccess</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
    },
    "thumbColorWarning": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the thumb element",
      "conditions": "<code>color=\"warning\"</code>",
      "deprecationInfo": "Combine the <a href=\"/material-ui/api/slider/#slider-classes-MuiSlider-thumb\">.MuiSlider-thumb</a> and <a href=\"/material-ui/api/slider/#slider-classes-MuiSlider-colorWarning\">.MuiSlider-colorWarning</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
    },
    "thumbSizeSmall": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the thumb element",
      "conditions": "<code>size=\"small\"</code>",
      "deprecationInfo": "Combine the <a href=\"/material-ui/api/slider/#slider-classes-MuiSlider-thumb\">.MuiSlider-thumb</a> and <a href=\"/material-ui/api/slider/#slider-classes-MuiSlider-sizeSmall\">.MuiSlider-sizeSmall</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
    },
    "track": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the track element" },
    "trackFalse": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>track={false}</code>"
    },
    "trackInverted": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>track=\"inverted\"</code>"
    },
    "valueLabel": {
      "description": "Styles applied to {{nodeName}}.",
      "nodeName": "the thumb label element"
    },
    "valueLabelCircle": {
      "description": "Styles applied to {{nodeName}}.",
      "nodeName": "the thumb label&#39;s circle element"
    },
    "valueLabelLabel": {
      "description": "Styles applied to {{nodeName}}.",
      "nodeName": "the thumb label&#39;s label element"
    },
    "valueLabelOpen": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the thumb label element",
      "conditions": "it&#39;s open"
    },
    "vertical": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>orientation=\"vertical\"</code>"
    }
  }
}