@neynar/ui/llm-docs/slider.llm.md

React UI component library built on shadcn/ui and Tailwind CSS

# Slider

**Type**: component

Slider - Range input control for selecting numeric values A versatile range input control built on Radix UI Slider primitives that allows users to select single or multiple values by dragging thumbs along a track. Supports both horizontal and vertical orientations, custom ranges, step intervals, and comprehensive accessibility features for keyboard and touch interaction. The component automatically renders the appropriate number of thumbs based on the number of values provided, supporting both single-value and multi-value range selection. Built with enhanced styling and smooth animations for an optimal user experience.

## JSX Usage

```jsx
import { Slider } from '@neynar/ui';

<Slider
  className="value"
  asChild={true}
  defaultValue={[]}
  value={[]}
  onValueChange={handleValueChange}
  onValueCommit={handleValueCommit}
  name="value"
  disabled={true}
  orientation={value}
  dir={value}
  inverted={true}
  min={0}
  max={0}
  step={0}
  minStepsBetweenThumbs={0}
  form="value"
/>
```

## Component Props

### className
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### asChild
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

### defaultValue
- **Type**: `number[]`
- **Required**: No
- **Description**: No description available

### value
- **Type**: `number[]`
- **Required**: No
- **Description**: No description available

### onValueChange
- **Type**: `(value: number[]) => void`
- **Required**: No
- **Description**: No description available

### onValueCommit
- **Type**: `(value: number[]) => void`
- **Required**: No
- **Description**: No description available

### name
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### disabled
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

### orientation
- **Type**: `"horizontal" | "vertical"`
- **Required**: No
- **Description**: No description available

### dir
- **Type**: `"ltr" | "rtl"`
- **Required**: No
- **Description**: No description available

### inverted
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

### min
- **Type**: `number`
- **Required**: No
- **Description**: No description available

### max
- **Type**: `number`
- **Required**: No
- **Description**: No description available

### step
- **Type**: `number`
- **Required**: No
- **Description**: No description available

### minStepsBetweenThumbs
- **Type**: `number`
- **Required**: No
- **Description**: No description available

### form
- **Type**: `string`
- **Required**: No
- **Description**: No description available

## Examples

### Example 1
```tsx
// Basic single-value slider
<Slider defaultValue={[50]} max={100} step={1} />
```
### Example 2
```tsx
// Controlled slider with state management
const [value, setValue] = useState([25])
<Slider
  value={value}
  onValueChange={setValue}
  max={100}
  step={5}
/>
```
### Example 3
```tsx
// Range slider with two thumbs for selecting a range
<Slider
  defaultValue={[25, 75]}
  max={100}
  step={1}
  minStepsBetweenThumbs={10}
/>
```
### Example 4
```tsx
// Vertical orientation for space-constrained layouts
<Slider
  defaultValue={[50]}
  max={100}
  orientation="vertical"
  className="h-60"
/>
```
### Example 5
```tsx
// Custom range and step intervals for precise control
<Slider
  defaultValue={[500]}
  min={0}
  max={1000}
  step={50}
/>
```
### Example 6
```tsx
// Form integration with name and onValueCommit
<form>
  <Slider
    name="volume"
    defaultValue={[75]}
    max={100}
    onValueCommit={(value) => console.log('Final value:', value)}
  />
</form>
```