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.
What does Range actually change?
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.
Why are Hover and Focus the same drawing?
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.
Why is the thumb's ring lighter than the rest of the kit's?
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.
What about vertical, or three thumbs?
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.
What is minStepsBetweenValues for?
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.
Does it need a readout?
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.
Which way does it run in an RTL layout?
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.