Skip to content

Commit b1aa780

Browse files
committed
docs: describe the new origin end option to the slider
1 parent 5d7579b commit b1aa780

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
@@ -114,7 +114,8 @@ interface PublicContext extends DirectionProperty, CommonProperties {
114114
*/
115115
orientation: "vertical" | "horizontal"
116116
/**
117-
* The origin of the slider range
117+
* The origin of the slider range. The track is filled from the origin
118+
* to the thumb for single values.
118119
* - "start": Useful when the value represents an absolute value
119120
* - "center": Useful when the value represents an offset (relative)
120121
* - "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
@@ -150,12 +150,18 @@ const [state, send] = useMachine(
150150

151151
## Changing the start position
152152

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:
155155

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`.
159165

160166
```jsx {3}
161167
const [state, send] = useMachine(
@@ -165,6 +171,11 @@ const [state, send] = useMachine(
165171
)
166172
```
167173

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+
168179
## Changing the thumb alignment
169180

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

0 commit comments

Comments
 (0)