🎛️ Slider — Anatomy

Slider
 ├─ Label (optional)
 ├─ Value / Tooltip above handle (optional)
 ├─ Track Container
 │    ├─ Track (background line)
 │    ├─ Track Filled (active progress)
 │    ├─ Steps (optional – ticks below track)
 │    └─ Handles
 │         ├─ Simple Handle (single value)
 │         └─ Range Handles (start & end handles)
 └─ Error Message (if error state)

🔍 Anatomy Parts Explained

1. Track (Base Line)

The full slider line from minimum to maximum value.

• Represents the selectable range.
• Always spans 100% of the slider width.
• Uses token: slider.track.bg.

2. Track Filled (Active Range)

The colored portion that reflects the current value(s).

• Simple Slider: from min → handle
• Range Slider: from start handle → end handle
• Uses token: slider.track.filled.

3. Steps (Optional)

Small tick marks below the track.

• Used for discrete or stepped values (e.g., 0, 25, 50, 75, 100).