snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)

apps/v4/registry/bases/base/examples/slider-example.tsx

@@ -0,0 +1,103 @@
+"use client"
+
+import * as React from "react"
+
+import {
+  Example,
+  ExampleWrapper,
+} from "@/registry/bases/base/components/example"
+import { Label } from "@/registry/bases/base/ui/label"
+import { Slider } from "@/registry/bases/base/ui/slider"
+
+export default function SliderExample() {
+  return (
+    <ExampleWrapper>
+      <SliderBasic />
+      <SliderRange />
+      <SliderMultiple />
+      <SliderVertical />
+      <SliderControlled />
+      <SliderDisabled />
+    </ExampleWrapper>
+  )
+}
+
+function SliderBasic() {
+  return (
+    <Example title="Basic">
+      <Slider defaultValue={50} max={100} step={1} />
+    </Example>
+  )
+}
+
+function SliderRange() {
+  return (
+    <Example title="Range">
+      <Slider defaultValue={[25, 50]} max={100} step={5} />
+    </Example>
+  )
+}
+
+function SliderMultiple() {
+  return (
+    <Example title="Multiple Thumbs">
+      <Slider defaultValue={[10, 20, 70]} max={100} step={10} />
+    </Example>
+  )
+}
+
+function SliderVertical() {
+  return (
+    <Example title="Vertical">
+      <div className="flex items-center gap-6">
+        <Slider
+          defaultValue={[50]}
+          max={100}
+          step={1}
+          orientation="vertical"
+          className="h-40"
+        />
+        <Slider
+          defaultValue={[25]}
+          max={100}
+          step={1}
+          orientation="vertical"
+          className="h-40"
+        />
+      </div>
+    </Example>
+  )
+}
+
+function SliderControlled() {
+  const [value, setValue] = React.useState([0.3, 0.7])
+
+  return (
+    <Example title="Controlled">
+      <div className="grid w-full gap-3">
+        <div className="flex items-center justify-between gap-2">
+          <Label htmlFor="slider-demo-temperature">Temperature</Label>
+          <span className="text-sm text-muted-foreground">
+            {value.join(", ")}
+          </span>
+        </div>
+        <Slider
+          id="slider-demo-temperature"
+          value={value}
+          onValueChange={(value) => setValue(value as number[])}
+          min={0}
+          max={1}
+          step={0.1}
+        />
+      </div>
+    </Example>
+  )
+}
+
+function SliderDisabled() {
+  return (
+    <Example title="Disabled">
+      <Slider defaultValue={[50]} max={100} step={1} disabled />
+    </Example>
+  )
+}