Slider

The outermost container. Sets the width context for the track and coordinates keyboard and pointer events across all child parts.

The horizontal rail that represents the full range of values.

The track is a positioned container — both the range fill and the thumb are absolutely positioned relative to it. Its height and border-radius define the visual style of the slider line.

The filled portion of the track from the minimum to the current value.

Its width is set inline as a percentage: width: 40%. It is purely decorative and carries pointer-events: none so clicks pass through to the track.

The draggable handle that represents the current value.

Receives role="slider" and exposes aria-valuenow, aria-valuemin, and aria-valuemax for assistive technology. Keyboard interaction: ArrowLeft / ArrowRight decrement / increment the value by one step.

Displays the current numeric value as text.

Uses aria-live="polite" so screen readers announce value changes without interrupting the user. Updates in sync with the thumb position.