Scroll-zoom bar
Primarily for usage in timelines, a scroll-zoom bar lets a user scroll or zoom with the same control.
| Property | Values | Default value | Required |
|---|---|---|---|
| size | s / m / l | m | |
| orientation | horizontal / vertical | horizontal | |
| hide track | yes / no | no | |
| hide handles | yes / no | no | |
| scale down | yes / no | no | |
| is detached | yes / no | no | |
| state | default / hover / keyboard focus | default |
{
"slug": "scroll-zoom-bar",
"$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/component.json",
"$id": "https://opensource.adobe.com/spectrum-design-data/schemas/components/scroll-zoom-bar.json",
"title": "Scroll-zoom bar",
"description": "Primarily for usage in timelines, a scroll-zoom bar lets a user scroll or zoom with the same control.",
"meta": {
"category": "navigation",
"documentationUrl": "https://spectrum.adobe.com/page/scroll-zoom-bar/"
},
"type": "object",
"properties": {
"size": {
"type": "string",
"enum": [
"s",
"m",
"l"
],
"default": "m"
},
"orientation": {
"type": "string",
"enum": [
"horizontal",
"vertical"
],
"default": "horizontal"
},
"hideTrack": {
"type": "boolean",
"default": false
},
"hideHandles": {
"type": "boolean",
"default": false
},
"scaleDown": {
"type": "boolean",
"default": false
},
"isDetached": {
"type": "boolean",
"default": false
},
"state": {
"type": "string",
"enum": [
"default",
"hover",
"keyboard focus"
],
"default": "default"
}
}
}