Track

A track is the part that holds still. Everything a person grabs in these controls moves along one: the thumb of a slider, the box in a scrollbar, the playhead of a scrubber. The track is what makes the movement legible, because it states the whole range at once and shows where in it the handle currently sits. A progress bar is the same geometry with the handle taken away, which is a good way to see that the track is a component in its own right rather than a decoration on one particular widget. This site’s own definitions lean on the word twice: a slider is a handle dragged along a track, and a scrubber is a track showing elapsed and buffered time. Both are naming this.

The track usually has two halves and the convention is old enough to be a rule. The part between the start and the handle is filled, and the part beyond the handle is empty, so the control reads as a quantity rather than as a position. Material calls these the active and inactive track, which is the most useful pair of names in circulation, and a scrubber adds a third band for buffered but unplayed time. A scrollbar’s track is the exception that proves the point: nothing is filled, because the thumb’s size already carries the information the fill would, namely how much of the content you can see at once.

The naming history is worth knowing because it still shows up in code. Older toolkits call it the trough, which is what GTK and Tk both use, and Windows documentation has long said trough or shaft for a scrollbar’s channel. Web platform APIs are split: the CSS pseudo-elements are ::-webkit-slider-runnable-track and ::-moz-range-track, so track is the spelling that won on the web, while groove and rail survive in conversation. If someone says trough, they are probably talking about a scrollbar and probably came from desktop software.

The craft problems are all about thinness. A track drawn at one or two pixels looks elegant and is nearly impossible to hit, so the pointer target has to be much taller than the paint: give the control a hit area of around 20 to 44 pixels regardless of how thin the groove is, and never make the groove itself the only place a press counts. The empty half needs real contrast against its background or the range disappears and only the fill reads. And the track should not animate its own length: a track that grows while the handle moves turns a position into a guess.