useSliderInput

Keep a range slider and its number inputs in sync.

HooksState@gaudi/design-system/hooks/state/use-slider-inputView in Storybook Source

For a two-thumb range with min and max inputs: slider moves update the inputs, and typed values are clamped against the bounds and the other thumb when committed.

Usage

import { useSliderInput } from '@gaudi/design-system/hooks';
const price = useSliderInput({ minValue: 0, maxValue: 500, initialValue: [50, 300] });

Examples

Range slider with exact inputs

Storybook

API

3 options

4 return values

Accessibility

Label both inputs ("Minimum price", "Maximum price") and both slider thumbs; the inputs give keyboard and screen reader users an exact entry.

Notes

Commit typed values on blur or Enter, not on every keystroke. Use parseFloat so an empty or invalid draft restores the previous committed value.

useBooleanGeneric boolean state with stable toggle, enable and disable actions.useControllableStateState that works controlled or uncontrolled, like native inputs.useCountdownA pausable countdown or count-up that stops at its target.useCounterA number with increment, decrement, set and reset actions.useDebounceCallbackA debounced function with cancel and flush.useDebounceValueA value that updates only after it stops changing.