@ceed/cds 1.34.1 → 1.36.0-next.1

package/dist/components/inputs/Slider.md

@@ -40,28 +40,46 @@ function MyComponent() {
 Slider supports three sizes: `sm`, `md` (default), and `lg`.
 
 ```tsx
-<Stack gap={3} sx={{
-  width: 300
-}}>
-<Box>
-  <Typography level="body-sm" sx={{
-    mb: 1
-  }}>Small</Typography>
-  <Slider size="sm" defaultValue={30} />
-</Box>
-<Box>
-  <Typography level="body-sm" sx={{
-    mb: 1
-  }}>Medium</Typography>
-  <Slider size="md" defaultValue={50} />
-</Box>
-<Box>
-  <Typography level="body-sm" sx={{
-    mb: 1
-  }}>Large</Typography>
-  <Slider size="lg" defaultValue={70} />
-</Box>
-</Stack>
+<Stack
+    gap={3}
+    sx={{
+      width: 300
+    }}
+  >
+    <Box>
+      <Typography
+        level="body-sm"
+        sx={{
+          mb: 1
+        }}
+      >
+        Small
+      </Typography>
+      <Slider size="sm" defaultValue={30} />
+    </Box>
+    <Box>
+      <Typography
+        level="body-sm"
+        sx={{
+          mb: 1
+        }}
+      >
+        Medium
+      </Typography>
+      <Slider size="md" defaultValue={50} />
+    </Box>
+    <Box>
+      <Typography
+        level="body-sm"
+        sx={{
+          mb: 1
+        }}
+      >
+        Large
+      </Typography>
+      <Slider size="lg" defaultValue={70} />
+    </Box>
+  </Stack>
 ```
 
 ```tsx
@@ -75,15 +93,18 @@ Slider supports three sizes: `sm`, `md` (default), and `lg`.
 Five semantic colors are available via the `color` prop.
 
 ```tsx
-<Stack gap={3} sx={{
-  width: 300
-}}>
-<Slider color="primary" defaultValue={40} />
-<Slider color="neutral" defaultValue={40} />
-<Slider color="danger" defaultValue={40} />
-<Slider color="success" defaultValue={40} />
-<Slider color="warning" defaultValue={40} />
-</Stack>
+<Stack
+    gap={3}
+    sx={{
+      width: 300
+    }}
+  >
+    <Slider color="primary" defaultValue={40} />
+    <Slider color="neutral" defaultValue={40} />
+    <Slider color="danger" defaultValue={40} />
+    <Slider color="success" defaultValue={40} />
+    <Slider color="warning" defaultValue={40} />
+  </Stack>
 ```
 
 ## Variants
@@ -91,14 +112,17 @@ Five semantic colors are available via the `color` prop.
 Four visual variants are supported: `solid`, `soft` (default), `outlined`, and `plain`.
 
 ```tsx
-<Stack gap={3} sx={{
-  width: 300
-}}>
-<Slider variant="solid" defaultValue={40} />
-<Slider variant="soft" defaultValue={40} />
-<Slider variant="outlined" defaultValue={40} />
-<Slider variant="plain" defaultValue={40} />
-</Stack>
+<Stack
+    gap={3}
+    sx={{
+      width: 300
+    }}
+  >
+    <Slider variant="solid" defaultValue={40} />
+    <Slider variant="soft" defaultValue={40} />
+    <Slider variant="outlined" defaultValue={40} />
+    <Slider variant="plain" defaultValue={40} />
+  </Stack>
 ```
 
 ## Range Slider
@@ -106,11 +130,13 @@ Four visual variants are supported: `solid`, `soft` (default), `outlined`, and `
 Pass an array of two values to `defaultValue` (or `value`) to create a range slider with two thumbs.
 
 ```tsx
-<Box sx={{
-  width: 300
-}}>
-<Slider defaultValue={[20, 60]} />
-</Box>
+<Box
+    sx={{
+      width: 300
+    }}
+  >
+    <Slider defaultValue={[20, 60]} />
+  </Box>
 ```
 
 ```tsx
@@ -122,26 +148,37 @@ Pass an array of two values to `defaultValue` (or `value`) to create a range sli
 Use the `marks` prop to display labeled marks along the track.
 
 ```tsx
-<Box sx={{
-  width: 300
-}}>
-<Slider defaultValue={50} marks={[{
-  value: 0,
-  label: '0'
-}, {
-  value: 25,
-  label: '25'
-}, {
-  value: 50,
-  label: '50'
-}, {
-  value: 75,
-  label: '75'
-}, {
-  value: 100,
-  label: '100'
-}]} />
-</Box>
+<Box
+    sx={{
+      width: 300
+    }}
+  >
+    <Slider
+      defaultValue={50}
+      marks={[
+        {
+          value: 0,
+          label: "0"
+        },
+        {
+          value: 25,
+          label: "25"
+        },
+        {
+          value: 50,
+          label: "50"
+        },
+        {
+          value: 75,
+          label: "75"
+        },
+        {
+          value: 100,
+          label: "100"
+        }
+      ]}
+    />
+  </Box>
 ```
 
 ```tsx
@@ -162,11 +199,13 @@ Use the `marks` prop to display labeled marks along the track.
 Set the `step` prop to control the increment between values. Use `marks={true}` to show a mark at each step.
 
 ```tsx
-<Box sx={{
-  width: 300
-}}>
-<Slider defaultValue={30} step={10} marks min={0} max={100} />
-</Box>
+<Box
+    sx={{
+      width: 300
+    }}
+  >
+    <Slider defaultValue={30} step={10} marks min={0} max={100} />
+  </Box>
 ```
 
 ```tsx
@@ -178,11 +217,13 @@ Set the `step` prop to control the increment between values. Use `marks={true}`
 Set `orientation="vertical"` to render a vertical slider. Ensure the container has a defined height.
 
 ```tsx
-<Box sx={{
-  height: 200
-}}>
-<Slider orientation="vertical" defaultValue={40} />
-</Box>
+<Box
+    sx={{
+      height: 200
+    }}
+  >
+    <Slider orientation="vertical" defaultValue={40} />
+  </Box>
 ```
 
 ```tsx
@@ -196,23 +237,36 @@ Set `orientation="vertical"` to render a vertical slider. Ensure the container h
 Control the value label tooltip display with `valueLabelDisplay`. Options: `on` (always visible), `auto` (on hover/focus), and `off` (hidden).
 
 ```tsx
-<Stack gap={4} sx={{
-  width: 300,
-  pt: 4
-}}>
-<Box>
-  <Typography level="body-sm" sx={{
-    mb: 2
-  }}>Always on</Typography>
-  <Slider defaultValue={40} valueLabelDisplay="on" />
-</Box>
-<Box>
-  <Typography level="body-sm" sx={{
-    mb: 1
-  }}>Auto (on hover)</Typography>
-  <Slider defaultValue={60} valueLabelDisplay="auto" />
-</Box>
-</Stack>
+<Stack
+    gap={4}
+    sx={{
+      width: 300,
+      pt: 4
+    }}
+  >
+    <Box>
+      <Typography
+        level="body-sm"
+        sx={{
+          mb: 2
+        }}
+      >
+        Always on
+      </Typography>
+      <Slider defaultValue={40} valueLabelDisplay="on" />
+    </Box>
+    <Box>
+      <Typography
+        level="body-sm"
+        sx={{
+          mb: 1
+        }}
+      >
+        Auto (on hover)
+      </Typography>
+      <Slider defaultValue={60} valueLabelDisplay="auto" />
+    </Box>
+  </Stack>
 ```
 
 ```tsx
@@ -225,11 +279,13 @@ Control the value label tooltip display with `valueLabelDisplay`. Options: `on`
 Set `disabled` to prevent user interaction.
 
 ```tsx
-<Box sx={{
-  width: 300
-}}>
-<Slider defaultValue={40} disabled />
-</Box>
+<Box
+    sx={{
+      width: 300
+    }}
+  >
+    <Slider defaultValue={40} disabled />
+  </Box>
 ```
 
 ## Common Use Cases
@@ -243,12 +299,7 @@ function VolumeControl() {
   return (
     <Stack gap={1}>
       <Typography level="body-sm">Volume: {volume}%</Typography>
-      <Slider
-        value={volume}
-        onChange={(_, newValue) => setVolume(newValue as number)}
-        min={0}
-        max={100}
-      />
+      <Slider value={volume} onChange={(_, newValue) => setVolume(newValue as number)} min={0} max={100} />
     </Stack>
   );
 }