Initial commit

docs/components/slider.md

@@ -0,0 +1,76 @@
+1. Home
+2. Components
+3. Slider
+
+# Slider
+
+An input where the user selects a value from within a given range.
+
+[Docs](https://www.radix-ui.com/primitives/docs/components/slider)[API Reference](https://www.radix-ui.com/primitives/docs/components/slider#api-reference)## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| showStep | boolean | false | Visualize step marks along the track |
+| min | number | 0 | Minimum value |
+| max | number | 100 | Maximum value |
+| step | number | 1 | Step size |
+| value | number[] | - | Controlled values for one or more thumbs |
+| defaultValue | number[] | - | Uncontrolled initial values |
+| onValueChange | (value: number[]) => void | - | Callback when value changes |
+| ...Radix props | ComponentProps<typeof SliderPrimitive.Root> | - | All Radix slider props |
+
+## Usage
+
+```jsx
+<Slider defaultValue={[50]} max={100} step={0.01}/>
+```
+
+### Create a range
+
+```jsx
+<Slider defaultValue={[25, 75]} max={100} step={1}/>
+```
+
+### Prevent thumb overlap
+
+```jsx
+<Slider defaultValue={[20, 70]} max={100} step={10} minStepsBetweenThumbs={1}/>
+```
+
+### Define step size
+
+```jsx
+<Slider defaultValue={[20]} max={100} step={10}/>
+```
+
+### Define step size and show
+
+```jsx
+<Slider defaultValue={[20]} min={2} max={100} step={10} showStep/>
+```
+
+```jsx
+<Slider showStep/>
+```
+
+### Examples
+
+```jsx
+// Single value
+<Slider defaultValue={[50]} min={0} max={100} step={1} />
+
+// Range
+<Slider defaultValue={[25, 75]} min={0} max={100} step={1} />
+```
+
+### Disabled
+
+```jsx
+<Slider defaultValue={[20]} max={100} step={10} disabled/>
+```
+
+### Disabled with step
+
+```jsx
+<Slider defaultValue={[20]} max={100} step={10} showStep disabled/>
+```