Multi-range

Basic 2-thumb (ngModel)

Two thumbs over [0, 100]. Block-crossing — value[0] is always lowest.

[ 20, 80 ]

Disabled

Initial value [2, 5, 8] on [0, 10].

[ 2, 5, 8 ]

Thumbs cannot get closer than 20 units.

[ 20, 60 ]

Tooltip + aria-valuetext formatted via (v) => '$' + v.toFixed(2).

$25.00 – $75.00

Min at the bottom (thermometer convention). Tooltip appears to the right.

[ 30, 70 ]

Wrapper has dir="rtl"; pointer + ←/→ keyboard math invert. Vertical mode unaffected by direction.

[ 15, 85 ]

Static state — cannot be focused or dragged.

[ 25, 75 ]

Bound via [formControl]. The JSON below reflects the live formControl.value.

[10,40,70]