Skip to content

Commit f4fa359

Browse files
committed
docs: describe the new origin end option to the slider
1 parent 59cc423 commit f4fa359

File tree

2 files changed

+18
-6
lines changed

2 files changed

+18
-6
lines changed

packages/machines/slider/src/slider.types.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,8 @@ export interface SliderProps extends DirectionProperty, CommonProperties {
119119
*/
120120
orientation?: "vertical" | "horizontal" | undefined
121121
/**
122-
* The origin of the slider range
122+
* The origin of the slider range. The track is filled from the origin
123+
* to the thumb for single values.
123124
* - "start": Useful when the value represents an absolute value
124125
* - "center": Useful when the value represents an offset (relative)
125126
* - "end": Useful when the value represents an offset from the end

website/data/components/slider.mdx

+16-5
Original file line numberDiff line numberDiff line change
@@ -143,19 +143,30 @@ const service = useMachine(slider.machine, {
143143

144144
## Changing the start position
145145

146-
By default, the slider's "zero position" is usually at the start position (left
147-
in LTR and right in RTL).
146+
By default, the slider's origin is at the `start` position (left
147+
in LTR and right in RTL). Change it by setting the `origin` property to these values:
148148

149-
In scenarios where the value represents an offset (or relative value), it might
150-
be useful to change the "zero position" to center. To do this, pass the `origin`
151-
context property to `center`.
149+
- `start`: the track will be filled from start to the thumb (default).
150+
- `center`: the track will be filled from the center (50%) to the thumb.
151+
- `end`: the track will be filled from the thumb to the end.
152+
153+
This applies to sliders with single values.
154+
155+
In scenarios where the value represents an offset (or relative value) on a
156+
diverging scale, it might be useful to change the origin to center. To do this,
157+
set the `origin` context property to `center`.
152158

153159
```jsx {2}
154160
const service = useMachine(slider.machine, {
155161
origin: "center",
156162
})
157163
```
158164

165+
In scenarios where the slider value is used as a threshold to include values above it,
166+
it might make more sense to set the `origin` to `end` to have the track filled from the
167+
thumb to the end.
168+
169+
159170
## Changing the thumb alignment
160171

161172
By default, the thumb is aligned to the start of the track. Set the

0 commit comments

Comments
 (0)