# Slider
**Category**: react
**URL**: https://www.heroui.com/docs/react/migration/slider
**Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/react/migration/(components)/slider.mdx
> Migration guide for Slider from HeroUI v2 to v3
***
Refer to the [v3 Slider documentation](/docs/react/components/slider) for complete API reference, styling guide, and advanced examples. This guide only focuses on migrating from HeroUI v2.
## Structure Changes
In v2, Slider used a simple structure with props:
```tsx
import { Slider } from "@heroui/react";
export default function App() {
return (
);
}
```
In v3, Slider requires compound components:
```tsx
import { Slider, Label } from "@heroui/react";
export default function App() {
return (
);
}
```
## Key Changes
### 1. Component Structure
**v2:** Simple Slider with props
**v3:** Compound components: `Slider.Output`, `Slider.Track`, `Slider.Fill`, `Slider.Thumb`
### 2. Prop Changes
| v2 Prop | v3 Location | Notes |
|---------|-------------|-------|
| `label` | — | Use `Label` component |
| `size` | — | Removed (use Tailwind CSS) |
| `color` | — | Removed (use Tailwind CSS) |
| `radius` | — | Removed (use Tailwind CSS) |
| `classNames` | — | Use `className` props on individual components |
| `showSteps` | — | Not yet supported |
| `showTooltip` | — | Not yet supported |
| `marks` | — | Not yet supported (see `Slider.Marks`) |
| `startContent` | — | Customize track wrapper directly |
| `endContent` | — | Customize track wrapper directly |
| `hideValue` | — | Omit `Slider.Output` |
| `hideThumb` | — | Omit `Slider.Thumb` |
| `showOutline` | — | Use Tailwind CSS |
| `renderThumb` | — | Use `Slider.Thumb` render prop |
| `renderLabel` | — | Use `Label` component |
| `renderValue` | — | Use `Slider.Output` render prop |
| `getValue` | — | Use `Slider.Output` render prop |
| `getTooltipValue` | — | Use `Slider.Output` render prop |
| `fillOffset` | — | Not yet supported |
| `disableThumbScale` | — | Use Tailwind CSS |
| `disableAnimation` | — | Removed |
| `onChangeEnd` | `Slider` | Still supported — handler called when the user finishes dragging a thumb |
## Migration Examples
### Controlled Slider
```tsx
import { useState } from "react";
const [value, setValue] = useState(25);
```
```tsx
import { useState } from "react";
const [value, setValue] = useState(25);
```
### Range Slider
```tsx
```
```tsx
{({state}) => (
<>
{state.values.map((_, i) => (
))}
)}
```
### Vertical Slider
```tsx
```
```tsx
```
### Custom Value Display
```tsx
(
)}
label="Volume"
defaultValue={30}
/>
```
```tsx
{({state}) => `Custom: ${state.values[0]}`}
```
## Component Anatomy
The v3 Slider follows this structure:
```
Slider (Root)
├── Label (optional)
├── Slider.Output (optional)
└── Slider.Track
├── Slider.Fill
└── Slider.Thumb (or multiple for range)
```
For range sliders, use a render prop in `Slider.Track`:
```tsx
{({state}) => (
<>
{state.values.map((_, i) => (
))}
)}
```
## Summary
1. **Component Structure**: Must use compound components (`Slider.Output`, `Slider.Track`, `Slider.Fill`, `Slider.Thumb`)
2. **Label Handling**: `label` prop removed - use `Label` component
3. **Styling Props Removed**: `size`, `color`, `radius` - use Tailwind CSS
4. **ClassNames Removed**: Use `className` props on individual components
5. **Feature Props Removed**: `showSteps`, `showTooltip`, `marks`, `startContent`, `endContent` - not yet supported or customize manually
6. **Render Props Removed**: `renderThumb`, `renderLabel`, `renderValue` - use render props on components
7. **Visibility Props Removed**: `hideValue`, `hideThumb` - omit components instead
8. **Range Sliders**: Must map over thumbs in `Slider.Track` render prop
9. **onChangeEnd**: Still supported on `Slider` — fires when the user finishes dragging a thumb