[docs][Slider] Add range slider example (#1600)

Signed-off-by: Zeeshan Tamboli <[email protected]>
Co-authored-by: Albert Yu <[email protected]>

Author: ZeeshanTamboli

docs/src/app/(public)/(content)/react/components/slider/demos/range-slider/css-modules/index.module.css

@@ -0,0 +1,37 @@
+.Control {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  width: 14rem;
+  padding-block: 0.75rem;
+  touch-action: none;
+  user-select: none;
+}
+
+.Track {
+  width: 100%;
+  height: 0.25rem;
+  background-color: var(--color-gray-200);
+  box-shadow: inset 0 0 0 1px var(--color-gray-200);
+  border-radius: 0.25rem;
+  user-select: none;
+}
+
+.Indicator {
+  border-radius: 0.25rem;
+  background-color: var(--color-gray-700);
+  user-select: none;
+}
+
+.Thumb {
+  width: 1rem;
+  height: 1rem;
+  border-radius: 100%;
+  background-color: white;
+  outline: 1px solid var(--color-gray-300);
+  user-select: none;
+
+  &:focus-visible {
+    outline: 2px solid var(--color-blue);
+  }
+}

docs/src/app/(public)/(content)/react/components/slider/demos/range-slider/css-modules/index.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { Slider } from '@base-ui-components/react/slider';
+import styles from './index.module.css';
+
+export default function ExampleSlider() {
+  return (
+    <Slider.Root defaultValue={[25, 45]}>
+      <Slider.Control className={styles.Control}>
+        <Slider.Track className={styles.Track}>
+          <Slider.Indicator className={styles.Indicator} />
+          <Slider.Thumb className={styles.Thumb} />
+          <Slider.Thumb className={styles.Thumb} />
+        </Slider.Track>
+      </Slider.Control>
+    </Slider.Root>
+  );
+}

docs/src/app/(public)/(content)/react/components/slider/demos/range-slider/index.ts

@@ -0,0 +1,3 @@
+'use client';
+export { default as CssModules } from './css-modules';
+export { default as Tailwind } from './tailwind';

docs/src/app/(public)/(content)/react/components/slider/demos/range-slider/tailwind/index.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { Slider } from '@base-ui-components/react/slider';
+
+export default function ExampleSlider() {
+  return (
+    <Slider.Root defaultValue={[25, 45]}>
+      <Slider.Control className="flex w-56 touch-none items-center py-3 select-none">
+        <Slider.Track className="h-1 w-full rounded bg-gray-200 shadow-[inset_0_0_0_1px] shadow-gray-200 select-none">
+          <Slider.Indicator className="rounded bg-gray-700 select-none" />
+          <Slider.Thumb className="size-4 rounded-full bg-white outline outline-1 outline-gray-300 select-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800" />
+          <Slider.Thumb className="size-4 rounded-full bg-white outline outline-1 outline-gray-300 select-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800" />
+        </Slider.Track>
+      </Slider.Control>
+    </Slider.Root>
+  );
+}

docs/src/app/(public)/(content)/react/components/slider/page.mdx

@@ -27,3 +27,11 @@ import { Slider } from '@base-ui-components/react/slider';
 ```
 
 <Reference component="Slider" parts="Root, Value, Control, Track, Indicator, Thumb" />
+
+## Examples
+
+### Range slider
+
+To create a range slider, provide an array of values with corresponding thumbs:
+
+<Demo compact path="./demos/range-slider" />