Slider onChangeEnd callback
The `onChangeEnd` callback is called when the user stops dragging the slider or when the value is changed with the keyboard. It can be used as a debounced callback to avoid too frequent updates.
slider/props
10 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Slider label props configuration
The `label` prop accepts a formatter function that receives the value as an argument and defaults to `f => f`. Set it to null to disable the label. The `labelAlwaysOn` prop, when true, displays the label at all times; by default the label is visible only when dragging. The `labelTransitionProps` prop passes options to the Transition component to customize label animation.
Slider domain prop for independent range control
By default, the `min` and `max` props define both the visual range and the selectable range. The `domain` prop allows independent control of the selectable range while keeping the visual track display defined by `min` and `max`. This is useful when displaying a wider track for context but restricting actual selection to a subset of values.
Slider marks prop format
Add marks to the slider by setting the `marks` prop to an array of objects. Each mark can be `{ value: 20 }` to display a mark on the slider track, or `{ value: 40, label: '40%' }` to add a mark label below the slider track. Mark values are relative to the slider value, not width.
Slider restrictToMarks prop
Set the `restrictToMarks` prop to true to restrict the slider value to marks only. When this prop is set, the `step` prop is ignored.
Slider scale prop for value transformation
Use the `scale` prop to represent the value on a different scale. The scale function transforms the internal slider value to a displayed value. For example, `scale={(x) => 2 ** x}` makes each increment of x represent 2 to the power of x.
Slider startPointValue prop
Use the `startPointValue` prop to change the origin of the filled bar. When set, the bar extends from the given value toward the current value—to the left for values below the start point and to the right for values above it. This prop is ignored when `inverted` is set.
Slider inverted prop
Set the `inverted` prop to invert the track direction.
Slider vertical orientation
Set `orientation="vertical"` to render the slider vertically. In vertical orientation, the minimum value is at the bottom and the maximum value is at the top.
Slider hidden marks for snapping behavior
Hidden marks allow snapping to specific values without displaying them visually on the track. This creates a sticky snapping behavior to certain values without showing them to the user. Use this feature together with the `restrictToMarks` prop.