@@ -143,19 +143,30 @@ const service = useMachine(slider.machine, {
143
143
144
144
## Changing the start position
145
145
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:
148
148
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 ` .
152
158
153
159
``` jsx {2}
154
160
const service = useMachine (slider .machine , {
155
161
origin: " center" ,
156
162
})
157
163
```
158
164
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
+
159
170
## Changing the thumb alignment
160
171
161
172
By default, the thumb is aligned to the start of the track. Set the
0 commit comments