Slider

Sliders allow users to quickly select a value within a range. They should be used when the upper and lower bounds to the range are invariable.

Property	Values	Default value	Required
label	text	-
label position	top / side	top
value	yes / no	no	no
min value	yes / no	no	no
max value	yes / no	no	no
is range	yes / no If true, the slider will allow selection of a range of values by displaying two handles.	no
step	yes / no	no	no
value format	text This will vary depending on implementation.	-
progression scale	linear / log	linear
width	yes / no	no	no
has fill	yes / no	no
fill start	yes / no	no	no
has gradient	yes / no	no
is editable	yes / no	no
is disabled	yes / no	no
state	default / hover / down / keyboard focus	default

{
  "slug": "slider",
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/component.json",
  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/components/slider.json",
  "title": "Slider",
  "description": "Sliders allow users to quickly select a value within a range. They should be used when the upper and lower bounds to the range are invariable.",
  "meta": {
    "category": "inputs",
    "documentationUrl": "https://spectrum.adobe.com/page/slider/"
  },
  "type": "object",
  "properties": {
    "label": {
      "type": "string"
    },
    "labelPosition": {
      "type": "string",
      "default": "top",
      "enum": [
        "top",
        "side"
      ]
    },
    "value": {
      "type": "number",
      "description": "from minValue to maxValue"
    },
    "minValue": {
      "type": "number",
      "default": 0
    },
    "maxValue": {
      "type": "number",
      "default": 100
    },
    "isRange": {
      "type": "boolean",
      "default": false,
      "description": "If true, the slider will allow selection of a range of values by displaying two handles."
    },
    "step": {
      "type": "number",
      "default": 1
    },
    "valueFormat": {
      "type": "string",
      "description": "This will vary depending on implementation."
    },
    "progressionScale": {
      "type": "string",
      "enum": [
        "linear",
        "log"
      ],
      "default": "linear"
    },
    "width": {
      "type": "number"
    },
    "hasFill": {
      "type": "boolean",
      "default": false
    },
    "fillStart": {
      "type": "number",
      "default": 0
    },
    "hasGradient": {
      "type": "boolean",
      "default": false
    },
    "isEditable": {
      "type": "boolean",
      "default": false
    },
    "isDisabled": {
      "type": "boolean",
      "default": false
    },
    "state": {
      "type": "string",
      "enum": [
        "default",
        "hover",
        "down",
        "keyboard focus"
      ],
      "default": "default"
    }
  }
}