{
  "tag": "ed-slider",
  "kind": "component",
  "summary": "Lets the user choose a value, or a range with two thumbs, by dragging a handle along a bounded scale.",
  "description": "<ed-slider>",
  "status": "experimental",
  "level": "atom",
  "since": "1.0",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/slider/",
  "usage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/slider/usage/",
  "playwright": "getByTestId('…')",
  "dependencies": [
    "ed-tooltip"
  ],
  "use": [
    "Settings where only the approximate value matters and the user is exploring or roughly tuning — volume, brightness, zoom, opacity, quality",
    "Filtering within a known, bounded range — for example a price or date range with two thumbs",
    "Values whose position relative to the minimum and maximum is itself useful information",
    "A user narrowing a list to an amount or percentage range by dragging both ends, while a typed field stays available for exact values",
    "Tuning an approximate setting where the user wants to see the effect immediately, such as a zoom level or a display opacity"
  ],
  "notFor": [
    {
      "when": "Entering a precise or specific number",
      "instead": "a typed field — [Number Input](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/number-input), or [Input](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/input) with the number type for free amounts"
    },
    {
      "when": "Choosing between a few discrete, named options",
      "instead": "[Radio Group](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/radio-group)"
    },
    {
      "when": "A simple on/off choice",
      "instead": "a [Switch](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/switch)"
    },
    {
      "when": "Open-ended or very large numeric ranges, where most positions are unreachable by dragging",
      "instead": "[Input](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/input) with the number type"
    }
  ],
  "rules": [
    {
      "id": "slider/not-alone-for-exact-values",
      "rule": "Never make a slider the only way to set a value that has to be exact — payroll amounts, tax figures, quantities that feed calculations. Whenever the user may need to enter an exact value, provide a typed number field alongside it or switch to one: [Input](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/input) with the number type for free amounts, [Number Input](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/number-input) for steppable quantities.",
      "why": "A slider is a coarse control: dragging to a precise number is slow and error-prone, especially on touch."
    },
    {
      "id": "slider/short-range",
      "rule": "Keep the range small enough that each step is reachable.",
      "why": "Sliders work best over short, coarse ranges.",
      "check": "warning"
    },
    {
      "id": "slider/show-value",
      "rule": "Show the current value while the user interacts, with the built-in tooltip (`with-tooltip`), so they get immediate feedback on what they are selecting. When the value must always be visible, provide a persistent readout — never rely on the tooltip alone, which only appears during interaction.",
      "check": "warning"
    },
    {
      "id": "slider/value-with-unit",
      "rule": "Format the displayed value with its unit — a percentage, a currency amount, a duration — so it reads as a real quantity. Never leave the value unlabeled or unitless.",
      "why": "A bare number gives the user no way to judge whether it is right."
    },
    {
      "id": "slider/end-labels",
      "rule": "Add short end labels (like \"Slow\" / \"Fast\" or \"$0\" / \"$100\") via the reference slot when the numbers alone do not convey meaning."
    },
    {
      "id": "slider/markers-for-small-ranges",
      "rule": "Use step markers only for small ranges where individual steps are meaningful, and never crowd a wide range with step markers or reference labels.",
      "why": "They clutter long tracks.",
      "check": "warning"
    },
    {
      "id": "slider/indicator-anchor",
      "rule": "Move the fill's starting point to a meaningful anchor (such as zero) when the scale runs from negative to positive.",
      "check": "error"
    },
    {
      "id": "slider/thumb-size",
      "rule": "Make the draggable thumb large enough to hit comfortably, especially on touch screens.",
      "check": "warning"
    },
    {
      "id": "slider/label-placement",
      "rule": "Place the label beside or above the slider, where it stays in view while the user drags."
    },
    {
      "id": "form-controls/visible-label",
      "rule": "In a form, give every control a persistent, visible label — short, descriptive and in plain language — and never placeholder text in its place. Outside a form the container decides whether the label shows; where it does not, `aria-label` gives the control its name.",
      "why": "Placeholder text disappears the moment the user types, leaving no reminder of what the field expected.",
      "check": "error"
    },
    {
      "id": "form-controls/readonly-not-disabled",
      "rule": "Use `readonly` for a value the user can never change — a calculated total, an assigned id — and `disabled` only while it could become editable under some condition.",
      "why": "Disabled implies the value could be unlocked, and a disabled control submits nothing; a read-only one submits its value."
    }
  ],
  "api": {
    "attributes": [
      {
        "name": "label",
        "property": "label",
        "type": "string",
        "default": "''",
        "description": "The slider's label. If you need to provide HTML in the label, use the `label` slot instead."
      },
      {
        "name": "aria-label",
        "property": "ariaLabel",
        "type": "null | string",
        "default": "null",
        "description": "The slider's accessible name for when no visible label is set. Mirrored onto the internal\n`role=\"slider\"` node (and folded into the range-thumb names) — an aria-label left on the\nhost alone would sit on a role-less element and be ignored by assistive tech."
      },
      {
        "name": "name",
        "property": "name",
        "type": "null | string",
        "default": "null",
        "description": "The name of the slider. This will be submitted with the form as a name/value pair."
      },
      {
        "name": "min-value",
        "property": "minValue",
        "type": "number",
        "default": "0",
        "description": "The minimum value of a range selection. Used only when range attribute is set."
      },
      {
        "name": "max-value",
        "property": "maxValue",
        "type": "number",
        "default": "50",
        "description": "The maximum value of a range selection. Used only when range attribute is set."
      },
      {
        "name": "value",
        "property": "defaultValue",
        "type": "string",
        "description": "The default value used for form reset. The raw attribute text, as on a native input."
      },
      {
        "name": "range",
        "property": "range",
        "type": "boolean",
        "default": "false",
        "description": "Converts the slider to a range slider with two thumbs."
      },
      {
        "name": "readonly",
        "property": "readonly",
        "type": "boolean",
        "default": "false",
        "description": "Makes the slider a read-only field."
      },
      {
        "name": "orientation",
        "property": "orientation",
        "type": "'horizontal' | 'vertical'",
        "default": "'horizontal'",
        "description": "The orientation of the slider."
      },
      {
        "name": "indicator-offset",
        "property": "indicatorOffset",
        "type": "number",
        "description": "The starting value from which to draw the slider's fill, which is based on its current value."
      },
      {
        "name": "min",
        "property": "min",
        "type": "number",
        "default": "0",
        "description": "The minimum value allowed."
      },
      {
        "name": "max",
        "property": "max",
        "type": "number",
        "default": "100",
        "description": "The maximum value allowed."
      },
      {
        "name": "step",
        "property": "step",
        "type": "number",
        "description": "The granularity the value must adhere to when incrementing and decrementing."
      },
      {
        "name": "autofocus",
        "property": "autofocus",
        "type": "boolean",
        "description": "Tells the browser to focus the slider when the page loads or a dialog is shown."
      },
      {
        "name": "tooltip-distance",
        "property": "tooltipDistance",
        "type": "number",
        "default": "8",
        "description": "The distance of the tooltip from the slider's thumb."
      },
      {
        "name": "tooltip-placement",
        "property": "tooltipPlacement",
        "type": "'left' | 'right' | 'top' | 'bottom'",
        "default": "'top'",
        "description": "The placement of the tooltip in reference to the slider's thumb."
      },
      {
        "name": "with-markers",
        "property": "withMarkers",
        "type": "boolean",
        "default": "false",
        "description": "Draws markers at each step along the slider. One marker is rendered per step, so the count\nfollows from `min`, `max` and `step` — a wide range with a fine step produces a lot of markers.\nUnlike a native range input, where every tick is an explicit `<option>`, that number is implicit\nhere, so keep it in mind when picking the three values."
      },
      {
        "name": "with-tooltip",
        "property": "withTooltip",
        "type": "boolean",
        "default": "false",
        "description": "Draws a tooltip above the thumb when the control has focus or is dragged."
      },
      {
        "name": "with-label",
        "property": "withLabel",
        "type": "boolean",
        "default": "false",
        "description": "Only required for SSR. Set to `true` if you're slotting in a `label` element so the server-rendered markup\nincludes the label before the component hydrates on the client."
      },
      {
        "name": "with-hint",
        "property": "withHint",
        "type": "boolean",
        "default": "false",
        "description": "Only required for SSR. Set to `true` if you're slotting in a `hint` element so the server-rendered markup\nincludes the hint before the component hydrates on the client."
      },
      {
        "name": "error",
        "property": "error",
        "type": "null | string",
        "default": "null",
        "description": "Draws an error-style input with danger colored border and icon. Set to an empty string (or use the bare attribute `<ed-input error>`) to render error styling without a visible message; submission is still blocked with a localized fallback validation message. Set to a non-empty string to additionally display that message in the message area, above the hint, and use it as the validation message. Set to `null` (the default) or `undefined`, or remove the attribute, to clear the error."
      },
      {
        "name": "warning",
        "property": "warning",
        "type": "null | string",
        "default": "null",
        "description": "Draws a warning-style input with warning colored border and icon. Set to an empty string (or use the bare attribute `<ed-input warning>`) to render warning styling without a visible message. Set to a non-empty string to additionally display that message in the message area, above the hint. Warnings do not block form submission. Set to `null` (the default) or `undefined`, or remove the attribute, to clear the warning."
      },
      {
        "name": "ai",
        "property": "ai",
        "type": "boolean",
        "default": "false",
        "description": "Draws an ai-style input with AI colored border and icon. Suppressed visually once\n`hasInteracted` flips, but the property and attribute are preserved so the styling\nreturns after `formResetCallback` clears `hasInteracted`."
      },
      {
        "name": "hint",
        "property": "hint",
        "type": "string",
        "default": "''",
        "description": "The form control's hint text. If you need to display HTML, use the `hint` slot instead."
      },
      {
        "name": "disabled",
        "property": "disabled",
        "type": "boolean",
        "description": "Disables the form control. HTML treats a control as disabled when either its own `disabled` is\nset or an ancestor `<fieldset>` is disabled, so reading this reports the combined state while\nwriting it sets only this element's own. Keeping the two apart is what lets a fieldset be\nre-enabled without clearing a disabled state the consumer set in the meantime."
      },
      {
        "name": "dir",
        "property": "dir",
        "type": "string"
      },
      {
        "name": "lang",
        "property": "lang",
        "type": "string"
      }
    ],
    "properties": [
      {
        "name": "validationTarget",
        "type": "undefined | HTMLElement",
        "description": "Override validation target to point to the focusable element"
      },
      {
        "name": "value",
        "type": "string",
        "description": "The current value, submitted as a name/value pair with form data — a **string**, as a native\n`<input type=\"range\">` reports it. valueAsNumber is the numeric door.\n\nA range is never empty: anything unusable becomes the midpoint of the range, and every value is\nsnapped to the step grid counted from `min` and clamped into the bounds. See\n`internal/range-value.ts` for the measured native rules this follows."
      },
      {
        "name": "valueAsNumber",
        "type": "number",
        "description": "The current value as a number. Reading never yields `NaN` — a range always has a value."
      },
      {
        "name": "isRange",
        "type": "boolean",
        "description": "Get if this is a range slider"
      },
      {
        "name": "valueFormatter",
        "type": "(value: number) => string",
        "description": "A custom formatting function to apply to the value. This will be shown in the tooltip and announced by screen\nreaders. Must be set with JavaScript. Property only."
      },
      {
        "name": "form",
        "type": "HTMLFormElement | null",
        "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work."
      }
    ],
    "methods": [
      {
        "name": "focus",
        "description": "Sets focus to the slider."
      },
      {
        "name": "blur",
        "description": "Removes focus from the slider."
      },
      {
        "name": "stepDown",
        "description": "Decreases the slider's value by `step`. This is a programmatic change, so `input` and `change` events will not be\nemitted when this is called."
      },
      {
        "name": "stepUp",
        "description": "Increases the slider's value by `step`. This is a programmatic change, so `input` and `change` events will not be\nemitted when this is called."
      },
      {
        "name": "setCustomValidity",
        "parameters": [
          {
            "name": "message",
            "type": "string"
          }
        ],
        "description": "Do not use this when creating a \"Validator\". This is intended for end users of components.\nWe track manually defined custom errors so we don't clear them on accident in our validators."
      },
      {
        "name": "resetValidity",
        "description": "Reset validity is a way of removing manual custom errors and native validation."
      },
      {
        "name": "getPropertyDescriptor",
        "static": true,
        "parameters": [
          {
            "name": "name",
            "type": "PropertyKey"
          },
          {
            "name": "key",
            "type": "string | symbol"
          },
          {
            "name": "options",
            "type": "PropertyDeclaration"
          }
        ],
        "returns": "PropertyDescriptor | undefined",
        "description": "Wraps the accessor of reflected properties so they always hold a valid value, as a native\nreflected IDL attribute does (`button.type = undefined` reads `submit`):\n\n- A property that declares `useDefault` takes the first value set on an element for its\n  default. That value is its field initializer's: the constructor has finished before markup,\n  a framework or any other code can set anything. Every later `null` or `undefined` means what\n  a dropped prop means on a native element — the attribute is removed: with the attribute\n  there, it is removed and Lit's `useDefault` restores the default without writing it; without\n  one, the property is set to the default. A value set and cleared again before the element\n  updates still writes the default once, from the pending reflection.\n- A Boolean is coerced with `Boolean()`, so `undefined` is `false`.\n\nLit's `useDefault` keeps the initial default out of the DOM. Setting the default explicitly\nwrites it, as `button.type = 'submit'` writes `type`."
      }
    ],
    "events": [
      {
        "name": "change",
        "react": "onChange",
        "type": "Event",
        "description": "Emitted when an alteration to the control's value is committed by the user."
      },
      {
        "name": "blur",
        "react": "onBlur",
        "type": "FocusEvent",
        "description": "Emitted when the control loses focus."
      },
      {
        "name": "focus",
        "react": "onFocus",
        "type": "FocusEvent",
        "description": "Emitted when the control gains focus."
      },
      {
        "name": "input",
        "react": "onInput",
        "type": "InputEvent",
        "description": "Emitted when the control receives input."
      },
      {
        "name": "ed-invalid",
        "react": "onEdInvalid",
        "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
      }
    ],
    "slots": [
      {
        "name": "label",
        "description": "The slider label. Alternatively, you can use the `label` attribute."
      },
      {
        "name": "hint",
        "description": "Text that describes how to use the input. Alternatively, you can use the `hint` attribute. instead."
      },
      {
        "name": "reference",
        "description": "One or more reference labels to show visually below the slider."
      }
    ],
    "cssProperties": [
      {
        "name": "--ed-slider-track-size",
        "default": "0.5em",
        "description": "The height or width of the slider's track."
      },
      {
        "name": "--ed-slider-marker-size",
        "default": "0.1875em",
        "description": "The size of each individual marker."
      },
      {
        "name": "--ed-slider-thumb-size",
        "default": "1.24em",
        "description": "The size of the thumb."
      }
    ],
    "parts": [
      {
        "name": "label",
        "description": "The element that contains the slider's label."
      },
      {
        "name": "message",
        "description": "The state message: an error, a warning, or the AI note."
      },
      {
        "name": "hint",
        "description": "The element that contains the slider's description."
      },
      {
        "name": "slider",
        "description": "The focusable element with `role=\"slider\"`. Contains the track and reference slot."
      },
      {
        "name": "track",
        "description": "The slider's track."
      },
      {
        "name": "indicator",
        "description": "The colored indicator that shows from the start of the slider to the current value."
      },
      {
        "name": "markers",
        "description": "The container that holds all the markers when `with-markers` is used."
      },
      {
        "name": "marker",
        "description": "The individual markers that are shown when `with-markers` is used."
      },
      {
        "name": "references",
        "description": "The container that holds references that get slotted in."
      },
      {
        "name": "thumb",
        "description": "The slider's thumb."
      },
      {
        "name": "thumb-min",
        "description": "The min value thumb in a range slider."
      },
      {
        "name": "thumb-max",
        "description": "The max value thumb in a range slider."
      },
      {
        "name": "tooltip",
        "description": "The tooltip, a `<ed-tooltip>` element."
      },
      {
        "name": "tooltip__popup",
        "description": "The tooltip's exported `popup` part, the element that positions it."
      },
      {
        "name": "tooltip__panel",
        "description": "The tooltip's exported `panel` part, its visible surface."
      },
      {
        "name": "tooltip__arrow",
        "description": "The tooltip's exported arrow."
      }
    ],
    "states": [
      {
        "name": "disabled",
        "description": "Applied when the slider is disabled."
      },
      {
        "name": "dragging",
        "description": "Applied when the slider is being dragged."
      },
      {
        "name": "focused",
        "description": "Applied when the slider has focus."
      },
      {
        "name": "user-valid",
        "description": "Applied when the slider is valid and the user has sufficiently interacted with it."
      },
      {
        "name": "user-invalid",
        "description": "Applied when the slider is invalid and the user has sufficiently interacted with it."
      },
      {
        "name": "required",
        "description": "The control is required."
      },
      {
        "name": "optional",
        "description": "The control is not required."
      },
      {
        "name": "invalid",
        "description": "The value fails constraint validation, whether or not the user has touched the control yet."
      },
      {
        "name": "valid",
        "description": "The value passes constraint validation."
      },
      {
        "name": "dirty",
        "description": "The user has interacted with the control."
      },
      {
        "name": "error",
        "description": "The `error` property is set, or the control is `user-invalid`."
      },
      {
        "name": "warning",
        "description": "The `warning` property is set."
      },
      {
        "name": "ai",
        "description": "The `ai` property is set and the user has not interacted with the control yet."
      }
    ]
  },
  "import": "import '@eurodata/eurodata-ui/dist/components/slider/slider.js';",
  "react": {
    "component": "EdSlider",
    "import": "import EdSlider from '@eurodata/eurodata-ui/dist/react/slider/index.js';"
  }
}