Brickslab.Tools

@brickslab./ui-webQuiz

Single or dual-handle range slider with value display and unit label.

Single slider

0100

With unit

25 %

0 %100 %

Range mode

20 km – 70 km

0 km100 km

Props

Prop	Type	Défaut	Requis	Description
`value`	`number \| [number, number]`	—	—	Current value — single number or [min, max] tuple for range mode.
`onChange`	`(v: number \| [number, number]) => void`	—	✓	Called with updated value.
`min`	`number`	`0`	—	Minimum value.
`max`	`number`	`100`	—	Maximum value.
`step`	`number`	`1`	—	Increment step.
`unit`	`string`	—	—	Unit suffix displayed next to the value (e.g. «km», «%»).
`range`	`boolean`	`false`	—	Enables dual-handle range mode.
`showValue`	`boolean`	`true`	—	Shows the current value next to the slider.
`disabled`	`boolean`	`false`	—	Disables all interactions.

Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  value={0}
  onChange={0}
  min={0}
  max={100}
  step={1}
  unit="..."
  range={false}
  showValue={true}
  // +1 autres props disponibles
/>

valueonChangeminmaxstepunitrangeshowValuedisabled

Usage

tsx

import { RangeSliderQuestion } from "@brickslab./ui-web";

const [value, setValue] = useState(50);

<RangeSliderQuestion
  value={value}
  onChange={(v) => setValue(v as number)}
  min={0}
  max={100}
  unit="%"
  showValue
/>