Slider

Migration guide for Slider from HeroUI v2 to v3

Refer to the v3 Slider documentation 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:

1import { Slider } from "@lenso/ui";2
3export default function App() {4  return (5    <Slider6      label="Volume"7      defaultValue={30}8      size="md"9      color="primary"10    />11  );12}

In v3, Slider requires compound components:

1import { Slider, Label } from "@lenso/ui";2
3export default function App() {4  return (5    <Slider defaultValue={30}>6      <Label>Volume</Label>7      <Slider.Output />8      <Slider.Track>9        <Slider.Fill />10        <Slider.Thumb />11      </Slider.Track>12    </Slider>13  );14}

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

1import { useState } from "react";2
3const [value, setValue] = useState(25);4
5<Slider6  value={value}7  onChange={setValue}8  label="Volume"9/>

Range Slider

1<Slider2  defaultValue={[100, 500]}3  formatOptions={{style: "currency", currency: "USD"}}4  label="Price Range"5  maxValue={1000}6  minValue={0}7  step={50}8/>

Vertical Slider

1<Slider2  defaultValue={30}3  orientation="vertical"4  label="Volume"5/>

Custom Value Display

1<Slider2  renderValue={(props) => (3    <output {...props}>Custom: {value}</output>4  )}5  label="Volume"6  defaultValue={30}7/>

Component Anatomy

The v3 Slider follows this structure:

1Slider (Root)2  ├── Label (optional)3  ├── Slider.Output (optional)4  └── Slider.Track5      ├── Slider.Fill6      └── Slider.Thumb (or multiple for range)

For range sliders, use a render prop in Slider.Track:

1<Slider.Track>2  {({state}) => (3    <>4      <Slider.Fill />5      {state.values.map((_, i) => (6        <Slider.Thumb key={i} index={i} />7      ))}8    </>9  )}10</Slider.Track>

Summary

Component Structure: Must use compound components (Slider.Output, Slider.Track, Slider.Fill, Slider.Thumb)
Label Handling: label prop removed - use Label component
Styling Props Removed: size, color, radius - use Tailwind CSS
ClassNames Removed: Use className props on individual components
Feature Props Removed: showSteps, showTooltip, marks, startContent, endContent - not yet supported or customize manually
Render Props Removed: renderThumb, renderLabel, renderValue - use render props on components
Visibility Props Removed: hideValue, hideThumb - omit components instead
Range Sliders: Must map over thumbs in Slider.Track render prop
onChangeEnd: Still supported on Slider — fires when the user finishes dragging a thumb