Back

Credit slider

300

A fill slider from the design system I built for Deck. Most sliders are a thumb riding a track; this one is a pill pinned to the left edge that grows rightward as the value rises, carrying the value inside it, with the grip on its right edge as the handle. Drag it, or tab to it and use the arrow keys.

Props

Deck
Mode
Look
Size
Stops
State
Value 300 (index 3)
<CreditSlider
  values={[30, 100, 200, 300, 500, 1000, 2000]}
  bind:selectedIndex
/>

Deck's tokens come across exactly: a 48px track at lg, 36 at md, 24 at sm, the pill inset 4px on --spacing-4, and a 3px grip on --color-basic-gray-alpha-15. Panel mode keeps its quiet chrome: ticks and grip stay invisible until you hover, focus or drag.

The original measures its track with a ResizeObserver before it can draw anything, which means it renders as a bare stub until JavaScript runs. Here the geometry is a calc() against the track's own width, so it comes out of the server already correct, which is why the card on the intro page looks right on a page that ships no JavaScript at all. The measurement is still there, but only for dragging, where the pill has to follow the pointer to the exact pixel.

Not ported: horizontal-trackpad-wheel stepping, and click-to-edit on the value readout.