From 49b07e6febe23c0e4b33f40410190db8d7dbed04 Mon Sep 17 00:00:00 2001
From: Segun Adebayo <joseshegs@gmail.com>
Date: Wed, 24 Apr 2024 22:07:25 +0100
Subject: [PATCH] docs: slider thumb alignment

---
 website/data/components/slider.mdx | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/website/data/components/slider.mdx b/website/data/components/slider.mdx
index 306afe5222..be160508c0 100644
--- a/website/data/components/slider.mdx
+++ b/website/data/components/slider.mdx
@@ -165,6 +165,34 @@ const [state, send] = useMachine(
 )
 ```
 
+## Changing the thumb alignment
+
+By default, the thumb is aligned to the start of the track. Set the
+`thumbAlignment` context property to `contain` or `center`.
+
+- `center`: the thumb will extend beyond the bounds of the slider track.
+- `contain`: the thumb will be contained within the bounds of the track.
+
+```jsx {3}
+const [state, send] = useMachine(
+  slider.machine({
+    thumbAlignment: "center",
+  }),
+)
+```
+
+If you use `contain` alignment, you might need to set the thumb size to prevent
+any flickering.
+
+```jsx {4}
+const [state, send] = useMachine(
+  slider.machine({
+    thumbAlignment: "contain",
+    thumbSize: { width: 20, height: 20 },
+  }),
+)
+```
+
 ## Usage within forms
 
 To use slider within forms, use the exposed `inputProps` from the `connect`