Slider
A 4px rule with a filled range and 12px thumbs sitting on it. Two components, seven variants, and four props that change nothing you can draw.
400 by 12, and the track is only 4 of that. The extra eight is the thumb's overhang: it is 12 across, centred on its value, and sticks four above and four below the rule. Size the component to the thumb or the ring gets clipped the moment you put it in a tight row.
With one thumb the base.primary fill runs from the left end to the value. With two it runs between them, and both ends are draggable. That is the only difference between the two Range values, and it is why they are a property rather than two components.
Half opacity on the board, so the track, the fill and the thumbs all dim together. No colour is swapped out. It matches the source's disabled:opacity-50 and it means a disabled slider still reads its value, which a greyed-out one would not.
Hover and focus are the same ring
Twelve across on radius.full, base.background inside a 1px base.primary edge. Both Hover and Focus add the same 3px ring at half strength and nothing else, which is not an oversight - the source puts hover:ring-4 and focus-visible:ring-4 on the same element with the same colour.
One detail worth knowing: the ring is drawn at half opacity, which is right - the source writes it as ring-ring/50. It is also the reason the thumb's ring looks lighter than the focus rings elsewhere in the kit, where the convention is a solid 2px inset. Two different rules, both deliberate, and the slider's is the one that matches shadcn.
Orientation, count, step and gap
The source turns the slider on its side, takes any number of thumbs, snaps to a step and keeps a minimum distance between values. None of that changes a single pixel of the parts, so none of it is a variant - but you cannot feel any of it from a still frame either.
The same four parts with the axis swapped, and the arrow keys swap with it - up increases rather than right. Nothing about the track or the thumb changes, which is why turning this into a variant would be drawing the same shapes rotated.
A slider without a readout is a guess
The kit draws the track, the fill and the thumbs. The number beside them is yours, and it is not optional - the source has a SliderValue part for exactly this reason. A bar with no figure tells you roughly, which is fine for volume and useless for a price.
There is no usage frame for this component, and none is needed - the four arrangements above are the same two parts with a different label above them. What matters is that the label exists at all, and that the numbers at the ends of the track say what the range actually is.
Two components, seven variants
Read straight out of the Penpot file. The axes below are the property names you will see in the variant dropdown.
Using the Slider
Because the thumb overhangs. It is 12 across and centred on the rule, so it sticks four above and four below. Sizing the component to the track instead would clip the thumb, and clip its ring entirely - the ring reaches another three beyond that, which is why the board wants room even at 12.
Where the indicator starts. With one thumb the base.primary fill runs from the left end of the track to the value; with two it runs between them and both ends drag. The parts are identical either way, which is why it is a property on one component rather than two components.
Because they are the same in the source: the thumb carries hover:ring-4 and focus-visible:ring-4 with the same ring colour, so pointing at it and tabbing to it look alike. The file draws both anyway rather than collapsing them, so a designer reading the variant list is not left wondering which one is missing.
Because it is at half opacity, and that is correct - the source writes it as ring-ring/50. Most focus rings in the kit are a solid 2px inset instead. Two conventions live side by side here, and the slider's is the one that matches shadcn.
Both work and neither is a variant. orientation flips the axis and the arrow keys with it; defaultValue is an array so the thumb count is up to you. Neither changes any part's appearance, so drawing them would be drawing the same four shapes again. This page has both running so you can feel the difference.
Stopping a range from collapsing to a point. Without it a user can drag both thumbs together and end up with a filter that matches nothing. With it the pair keeps a fixed distance and the range always means something - the demo on this page holds them 20 apart.
Yes, and the source agrees - it ships a SliderValue part. The kit draws the track, the fill and the thumbs; the number is yours to add. A bar with no figure tells you roughly, which is fine for volume and useless for a price, and the four examples on this page are really four ways of labelling the same control.
Right to left, all of it. Zero sits on the right, the indicator grows leftwards, and the left arrow key increases the value - a slider is a number line and a number line follows the writing system. Nothing in the file needs mirroring for this: positions are measured from the inline start, so dir flips them, and the only thing written by hand is the pointer maths.