Media Scrollbar

A draggable scrollbar for the product media gallery.

Last updated

August 14, 2026

How to use

Place it near the product media gallery and connect ⛁ Butter Data to the product's Butter Data CMS field.
Style the Thumb and Track colors, then set Track Radius and Thumb Radius.
Choose Height — Fill or Fixed (Fixed unlocks Padding).
Optionally set a Min Thumb width, turn Draggable off, or set Single Page to Hide.

Drag, click, or keyboard to seek

The thumb's width represents one media item relative to the total count, and its position maps to the current slide index. Customers can drag the thumb, click anywhere on the track to jump there, or seek with the arrow, Home, and End keys. Turn Draggable off if you only want click-to-seek.

Fill vs. Fixed height

`Height`	`Behavior`
`Fill`	The scrollbar fills the height of its Framer frame.
`Fixed`	You set a fixed bar height directly, which also unlocks the `Padding` control around the track.

It's index-based, not pixel scrolling

Unlike a free-scrolling pixel scrollbar, this one moves in discrete steps — one per media item — so dragging or clicking always lands on the nearest slide rather than an arbitrary scroll position. It reads and drives the same shared gallery as Media Controls, Media Dots, the Media Slideshow, and Media Counter, so it always matches the rest of the gallery. Set Single Page to Hide if you don't want it to appear for single-item galleries.