Range Slider

Dual-thumb slider for selecting a bounded numeric range with keyboard support.

Price range 20 – 80

Stable

Anatomy

1 2 3

Budget 30 – 70

Price range 20 – 80

Default

Price range 20 – 80

Disabled

Discount range 10 – 60

Both thumbs respect the configured step so ranges snap to meaningful increments.

Age range 24 – 52

The value display updates as either thumb moves so the selected interval stays readable.

Budget 20 – 80

Disabled sliders preserve the selected bounds visually but cannot be changed by pointer or keyboard.

Price range 20 – 80

Use a range slider when people need to set both minimum and maximum values within the same scale.

Don't

Don’t replace a shared range control with unrelated numeric fields when a visual interval is important.

Key	Interaction
`Tab`	Moves focus between the lower thumb, upper thumb, and the next focusable element.
`←` / `↓`	Moves the focused thumb down by one step without crossing the other thumb.
`→` / `↑`	Moves the focused thumb up by one step without crossing the other thumb.
`Home` / `End`	Moves the focused thumb to the minimum or maximum bound.

Each thumb uses a native <input type="range"> for built-in keyboard support.
Provide clear labels for both bounds, especially when the surrounding field label is not enough context.
Keep the visible value display synchronized with the actual form values.
Disabled state uses the native disabled attribute on both thumbs.