DEVELOPER REFERENCE · v4.0.0

PreactRangeSlider API

Props, callbacks and methods. Select an underlined type to explore its fields, allowed values and callback arguments.

PreactRangeSlider21 props2 callbacks0 methods

Props21

PreactRangeSlider props
Name	Type	Description
`min`Required	`number`	Minimum value for the range
`max`Required	`number`	Maximum value for the range
`fromValue`Required	`number`	Current value for the start of the range
`toValue`Required	`number`	Current value for the end of the range
`step`Optional	`number \| undefined`	Value-domain increment for native range handles. Defaults to the slider's decimal precision.
`showTooltips`Optional	`boolean \| undefined`	Whether to show tooltips on hover
`showRangeDisplay`Optional	`boolean \| undefined`	Whether to show the current range values above the slider
`showRangeInputs`Optional	`boolean \| undefined`	Whether to show numeric inputs for editing the selected range
`disabled`Optional	`boolean \| undefined`	Disable both native range handles.
`scaleFactor`Optional	`number \| undefined`	Scaling used to preserve decimals in native range inputs. Defaults to 100.
`className`Optional	`string \| undefined`	Extra class on the shared slider root.
`controlClassName`Optional	`string \| undefined`	Extra class on the shared dual-handle control.
`fromClassName`Optional	`string \| undefined`	Extra classes retained by feature adapters.
`toClassName`Optional	`string \| undefined`	Additional CSS classes for the to part of the component.
`fromAriaLabel`Optional	`string \| undefined`	Accessible names for the two native range handles.
`toAriaLabel`Optional	`string \| undefined`	Accessible label for the upper endpoint of the range slider.
`formatInputValue`Optional	`((value: number) => string) \| undefined`Inspect type	Optional function to format values inside the editable inputs. Defaults to `String(value)`, which keeps dot decimals independent of the browser's localized number input rendering.
`parseInputValue`Optional	`((value: string) => number) \| undefined`Inspect type	Optional function to parse editable input text back to a number. Return `NaN` to ignore incomplete or invalid text while the user is typing. The default parser accepts both dot and comma decimal separators.
`formatValue`Optional	`((value: number) => string) \| undefined`Inspect type	Optional function to format read-only labels and tooltips. Editable inputs use `formatInputValue` so display labels and input text can intentionally use different formats.
`formatFromValue`Optional	`((value: number) => string) \| undefined`Inspect type	Optional handle-specific display/accessible value formatters.
`formatToValue`Optional	`((value: number) => string) \| undefined`Inspect type	Formats the upper endpoint value of a range slider.

Events and callbacks2

PreactRangeSlider events and callbacks
Name	Type	Description
`onRangeChange`Required	`(range: SliderRange) => void`Inspect type	Callback fired when the range values change
`onRangeCommit`Optional	`((range: SliderRange) => void) \| undefined`Inspect type	Callback fired when a native handle commits its change.

Methods0

No component-specific imperative methods. Use props and callbacks to control this component.