{
  "id": "uilib/components/slider",
  "name": "Slider",
  "description": "The Slider component provides a visual indication of adjustable value.",
  "group": "components",
  "slug": "/uilib/components/slider/",
  "props": [
    {
      "name": "value",
      "doc": "The `value` of the slider as a number or an array. If an array with numbers is provided, each number will represent a thumb button (the `+` and `-` button will be hidden on multiple thumbs).",
      "type": [
        "number",
        "Array<number>"
      ],
      "status": "required",
      "defaultValue": null
    },
    {
      "name": "min",
      "doc": "The minimum value. Can be a negative number as well. Defaults to `0`.",
      "type": "number",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "max",
      "doc": "The maximum value. Defaults to `100`.",
      "type": "number",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "step",
      "doc": "The steps the slider takes on changing the value. Defaults to `null`.",
      "type": "number",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "vertical",
      "doc": "Show the slider vertically. Defaults to `false`.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "reverse",
      "doc": "Show the slider reversed. Defaults to `false`.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "stretch",
      "doc": "If set to `true`, then the slider will be 100% in `width`.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "hideButtons",
      "doc": "Removes the helper buttons. Defaults to `false`.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "multiThumbBehavior",
      "doc": "Use either `omit`, `push` or `swap`. This property only works for two (range) or more thumb buttons, while `omit` will stop the thumb from swapping, `push` will push its nearest thumb along. Defaults to `swap`.",
      "type": "string",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "thumbTitle",
      "doc": "Give the slider thumb button a title for accessibility reasons. Defaults to `null`.",
      "type": "string",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "subtractTitle",
      "doc": "Give the subtract button a title for accessibility reasons. Defaults to `Decrease (%s)`.",
      "type": "string",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "addTitle",
      "doc": "Give the add button a title for accessibility reasons. Defaults to `Increase (%s)`.",
      "type": "string",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "numberFormat",
      "doc": "Will extend the return object with a `number` property (from `onChange` event). You can use all the options from the [NumberFormat](/uilib/components/number-format/properties) component. It also will use that formatted number in the increase/decrease buttons. If it has to represent a currency, then use e.g. `numberFormat={{ currency: true, decimals: 0 }}`.",
      "type": "object",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "tooltip",
      "doc": "Use `true` to show a tooltip on `mouseOver`, `touchStart` and `focus`, showing the current number (if `numberFormat` is given) or the raw value.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "alwaysShowTooltip",
      "doc": "Use `true` to always show the tooltip, in addition to the `tooltip` property.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "label",
      "doc": "Prepends the Form Label component. If no ID is provided, a random ID is created.",
      "type": "string",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "labelDirection",
      "doc": "Use `labelDirection=\"vertical\"` to change the label layout direction. Defaults to `horizontal`.",
      "type": "string",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "labelSrOnly",
      "doc": "Use `true` to make the label only readable by screen readers.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "status",
      "doc": "Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.",
      "type": [
        "error",
        "info",
        "boolean"
      ],
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "statusState",
      "doc": "Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.",
      "type": [
        "error",
        "info"
      ],
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "statusProps",
      "doc": "Use an object to define additional FormStatus properties.",
      "type": "object",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "globalStatusId",
      "doc": "The `status_id` used for the target [GlobalStatus](/uilib/components/global-status).",
      "type": "string",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "suffix",
      "doc": "Text describing the content of the Slider more than the label. You can also send in a React component, so it gets wrapped inside the Slider component.",
      "type": "string",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "skeleton",
      "doc": "If set to `true`, an overlaying skeleton with animation will be shown.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "extensions",
      "doc": "Makes it possible to display overlays with other functionality such as a marker on the slider marking a given value.",
      "type": "object",
      "status": "optional",
      "defaultValue": null
    }
  ],
  "events": [
    {
      "name": "onChange",
      "doc": "will be called on state changes made by the user. The callback `value` and `rawValue` is a number `{ value, rawValue, event }`. But if the prop `numberFormat` is given, then it will return an additional `number` with the given format `{ value, number, rawValue, event }`.",
      "type": "function",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "onDragStart",
      "doc": "will be called once the user stops dragging. Returns `{ event }`.",
      "type": "function",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "onDragEnd",
      "doc": "will be called once the user starts dragging. Returns `{ event }`.",
      "type": "function",
      "status": "optional",
      "defaultValue": null
    }
  ],
  "related": [
    "Space"
  ],
  "checksum": "57e141ff821099f50b54866c64a72d416d3cda55cae5654b059f193cbee9bf66",
  "source": {
    "repo": "https://github.com/dnbexperience/eufemia",
    "file": "packages/dnb-eufemia/src/components/slider/Slider.tsx",
    "permalink": "https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-eufemia/src/components/slider/Slider.tsx"
  },
  "sources": {
    "entry": {
      "local": "src/docs/uilib/components/slider.mdx",
      "public": "https://d3bdcd79.eufemia-e25.pages.dev/uilib/components/slider/"
    },
    "props": {
      "local": "src/docs/uilib/components/slider/properties.mdx",
      "public": "https://d3bdcd79.eufemia-e25.pages.dev/uilib/components/slider/properties/"
    },
    "events": {
      "local": "src/docs/uilib/components/slider/events.mdx",
      "public": "https://d3bdcd79.eufemia-e25.pages.dev/uilib/components/slider/events/"
    },
    "demos": {
      "local": "src/docs/uilib/components/slider/demos.mdx",
      "public": "https://d3bdcd79.eufemia-e25.pages.dev/uilib/components/slider/demos/"
    }
  },
  "version": "0.0.0-development",
  "generatedAt": "2025-12-18T09:47:41.122Z",
  "schemaVersion": 1
}