Carousel Scrollbar

A draggable scrollbar for a carousel.

Last updated

August 14, 2026

How to use

Add the Carousel and give it a unique Carousel ID.
Place an instance and set its Carousel ID to the same value.
Style the Thumb and Track colors, then set Track Radius and Thumb Radius independently.
Choose Height — Fill to stretch the scrollbar to its frame, or Fixed to set an explicit bar height, which also unlocks Padding.
Optionally set Min Thumb (minimum thumb width), turn Draggable off for a display-only bar, or set Single Page to Hide.

Fill vs. Fixed height

Height controls how the bar occupies its frame, and changes what else is available:

`Height`	`Behavior`	`Padding`
`Fill`	The scrollbar stretches to fill its frame.	The `Padding` controls are hidden and ignored.
`Fixed`	Renders the track at an explicit height in px that you set.	`Padding` becomes available, all sides or per-side.

Drag, click, and keyboard seeking

Customers can drag the thumb with mouse, pen, or touch; click or tap anywhere on the track to jump straight there; or, once the thumb is focused, use the keyboard — arrow keys nudge by 5%, and Home/End jump to the start or end. The cursor shows grab/grabbing while dragging is available. The thumb is accessible to screen readers as a labelled slider, and is only keyboard-focusable when draggable. Turn Draggable off and the bar becomes a passive position indicator — no dragging, clicking, or keyboard seeking.

Thumb size, Min Thumb, and radius clipping

Thumb size reflects the visible fraction of content (viewport width ÷ total content width), and thumb position reflects scroll progress — dragging or clicking keeps the final position in sync so there's no snap-back on release. Min Thumb sets a floor on the thumb's width in px (default 24) so it never shrinks to the point of being unusable on very long rows. The track clips its contents, so Track Radius also clips the thumb at the ends — for example, a Track Radius of 12 will round off a square Thumb Radius where it meets the track edge. Thumb Radius is otherwise set independently of Track Radius.

Scrollbar vs. Dots — which to use

Use the scrollbar for long, free-scrolling rows where proportional position and how much content remains actually helps the customer orient themselves. Use Carousel Dots instead for a small, fixed number of pages where a simple position indicator is enough.