@@ -150,12 +150,18 @@ const [state, send] = useMachine(
150
150
151
151
## Changing the start position
152
152
153
- By default, the slider's "zero position" is usually at the start position (left
154
- in LTR and right in RTL).
153
+ By default, the slider's origin is at the ` start ` position (left
154
+ in LTR and right in RTL). Change it by setting the ` origin ` property to these values:
155
155
156
- In scenarios where the value represents an offset (or relative value), it might
157
- be useful to change the "zero position" to center. To do this, pass the ` origin `
158
- context property to ` center ` .
156
+ - ` start ` : the track will be filled from start to the thumb (default).
157
+ - ` center ` : the track will be filled from the center (50%) to the thumb.
158
+ - ` end ` : the track will be filled from the thumb to the end.
159
+
160
+ This applies to sliders with single values.
161
+
162
+ In scenarios where the value represents an offset (or relative value) on a
163
+ diverging scale, it might be useful to change the origin to center. To do this,
164
+ set the ` origin ` context property to ` center ` .
159
165
160
166
``` jsx {3}
161
167
const [state , send ] = useMachine (
@@ -165,6 +171,11 @@ const [state, send] = useMachine(
165
171
)
166
172
```
167
173
174
+ In scenarios where the slider value is used as a threshold to include values above it,
175
+ it might make more sense to set the ` origin ` to ` end ` to have the track filled from the
176
+ thumb to the end.
177
+
178
+
168
179
## Changing the thumb alignment
169
180
170
181
By default, the thumb is aligned to the start of the track. Set the
0 commit comments