Range

FormRange is a styled <input type=“range”> — a consistent track and thumb across browsers, with all the native range attributes (min, max, step, value) passing straight through.

Import

tsx

import { FormRange } from '@metatoy/bootstrap-styled';

Basic

Pair the slider with a FormLabel and give it a defaultValue (or a controlled value + onChange).

Min, max & step

The native min, max, and step attributes control the slider’s range and increment.

Disabled

Add disabled to dim the track and thumb and block interaction.

Props

FormRange adds no props of its own — it accepts all native <input type="range"> attributes (min, max, step, value / defaultValue, onChange, disabled, id, name, …). The type is fixed to range.

Theming

The thumb color is --bs-primary (with --bs-primary-rgb for its focus glow), and the track fill uses --bs-secondary-bg / --bs-secondary-color. Override those tokens — via a theme or a scoped inline style — to re-skin the slider without touching the component (see the Forms overview re-skin demo).

Accessibility

FormRange is a native range input, so it’s keyboard-operable (arrow keys) and announced with its value out of the box. Associate it with a FormLabel via htmlFor / id. Because the current value isn’t shown visually, consider rendering the live value next to the slider (and/or an aria-valuetext) when the number matters to the user.

Explore in Ladle

Browse the range stories in the interactive gallery: Open in Ladle.