Slider

A slider allows a user to select one or more values within a range

Usage

1import { Slider } from '@lenso/ui';

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Slider } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5
6const styles = stylex.create({ slider: { width: "100%", maxWidth: 320 } });7export function Default() {8  return (9    <Slider xstyle={styles.slider} defaultValue={30}>10      <Slider.Label>Volume</Slider.Label>11      <Slider.Output />12      <Slider.Control>13        <Slider.Track>14          <Slider.Fill />15        </Slider.Track>16        <Slider.Thumb aria-label="Volume" />17      </Slider.Control>18    </Slider>19  );20}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Anatomy

1import { Slider, Label } from '@lenso/ui';2
3export default () => (4  <Slider>5    <Label />6    <Slider.Output />7    <Slider.Track>8      <Slider.Fill />9      <Slider.Thumb />10    </Slider.Track>11  </Slider>12)

Examples

Disabled

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Slider } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({ root: { width: "100%", maxWidth: "20rem" } });6export function Disabled() {7  return (8    <Slider disabled xstyle={styles.root} defaultValue={30}>9      <Slider.Label>Volume</Slider.Label>10      <Slider.Output />11      <Slider.Control>12        <Slider.Track>13          <Slider.Fill />14        </Slider.Track>15        <Slider.Thumb />16      </Slider.Control>17    </Slider>18  );19}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Range Slider Anatomy

1import { Slider, Label } from '@lenso/ui';2
3export default () => (4  <Slider defaultValue={[25, 75]}>5    <Label />6    <Slider.Output />7    <Slider.Track>8      {({state}) => (9        <>10          <Slider.Fill />11          {state.values.map((_, i) => (12            <Slider.Thumb key={i} index={i} />13          ))}14        </>15      )}16    </Slider.Track>17  </Slider>18)

Vertical

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Slider } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({6  wrapper: { display: "flex", height: "16rem", alignItems: "center", justifyContent: "center" },7  root: { height: "100%" },8});9export function Vertical() {10  return (11    <div {...stylex.props(styles.wrapper)}>12      <Slider xstyle={styles.root} defaultValue={30} orientation="vertical">13        <Slider.Label>Volume</Slider.Label>14        <Slider.Output />15        <Slider.Control>16          <Slider.Track>17            <Slider.Fill />18          </Slider.Track>19          <Slider.Thumb />20        </Slider.Control>21      </Slider>22    </div>23  );24}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Range

1"use client";2/**3 * Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.04 * Native Base UI control geometry and value formatting.5 */6import { Slider } from "@lenso/ui";7import * as stylex from "@stylexjs/stylex";8
9const styles = stylex.create({ root: { width: "100%", maxWidth: "20rem" } });10
11export function Range() {12  return (13    <Slider14      xstyle={styles.root}15      defaultValue={[100, 500]}16      format={{ currency: "USD", style: "currency" }}17      max={1000}18      min={0}19      step={50}20    >21      <Slider.Label>Price Range</Slider.Label>22      <Slider.Output>{(formattedValues) => formattedValues.join(" – ")}</Slider.Output>23      <Slider.Control>24        <Slider.Track>25          <Slider.Fill />26        </Slider.Track>27        <Slider.Thumb index={0} aria-label="Minimum price" />28        <Slider.Thumb index={1} aria-label="Maximum price" />29      </Slider.Control>30    </Slider>31  );32}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Render Function

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Slider } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({ root: { width: "100%", maxWidth: "20rem" } });6export function RenderFunction() {7  return (8    <Slider9      xstyle={styles.root}10      defaultValue={30}11      render={(props) => <div {...props} data-custom="foo" />}12    >13      <Slider.Label>Volume</Slider.Label>14      <Slider.Output />15      <Slider.Control>16        <Slider.Track>17          <Slider.Fill />18        </Slider.Track>19        <Slider.Thumb />20      </Slider.Control>21    </Slider>22  );23}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Customization

Tailwind CSS

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Slider } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({6  root: { width: "100%", maxWidth: "20rem" },7  label: { fontWeight: 500, color: "var(--foreground)" },8  output: { fontSize: ".75rem", color: "var(--muted)", fontVariantNumeric: "tabular-nums" },9  track: { backgroundColor: "var(--default)" },10  fill: { backgroundColor: "var(--accent)" },11  thumb: {12    backgroundColor: "var(--accent)",13    "::after": { backgroundColor: "var(--accent-foreground)" },14  },15});16export function CustomStyles() {17  return (18    <Slider xstyle={styles.root} defaultValue={40}>19      <Slider.Label xstyle={styles.label}>Brightness</Slider.Label>20      <Slider.Output xstyle={styles.output} />21      <Slider.Control>22        <Slider.Track xstyle={styles.track}>23          <Slider.Fill xstyle={styles.fill} />24        </Slider.Track>25        <Slider.Thumb xstyle={styles.thumb} />26      </Slider.Control>27    </Slider>28  );29}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Global CSS

To customize the Slider component classes, you can use the @layer components directive. Learn more.

1@layer components {2  .slider {3    @apply flex flex-col gap-2;4  }5
6  .slider__output {7    @apply text-muted-fg text-sm;8  }9
10  .slider-track {11    @apply relative h-2 w-full rounded-full bg-surface-secondary;12  }13
14  .slider-fill {15    @apply absolute h-full rounded-full bg-accent;16  }17
18  .slider-thumb {19    @apply size-4 rounded-full bg-accent border-2 border-background;20  }21}

Styling Reference

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The Slider component uses these CSS classes (View source styles):

Base Classes [!toc]

.slider - Base slider container
.slider__output - Output element displaying current value(s)
.slider-track - Track element containing fill and thumbs
.slider-fill - Fill element showing selected range
.slider-thumb - Individual thumb element

State Classes [!toc]

.slider[data-disabled="true"] - Disabled slider state
.slider[data-orientation="vertical"] - Vertical orientation
.slider-thumb[data-dragging="true"] - Thumb being dragged
.slider-thumb[data-focus-visible="true"] - Thumb keyboard focused
.slider-thumb[data-disabled="true"] - Disabled thumb state
.slider-track[data-fill-start="true"] - Fill starts at beginning
.slider-track[data-fill-end="true"] - Fill ends at end

Interactive States

The component supports both CSS pseudo-classes and data attributes for flexibility:

Hover: :hover or [data-hovered="true"] on thumb
Focus: :focus-visible or [data-focus-visible="true"] on thumb
Dragging: [data-dragging="true"] on thumb
Disabled: :disabled or [data-disabled="true"] on slider or thumb

API Reference

Slider

Prop	Type	Default	Description
`value`	`number \| number[]`	-	The current value (controlled)
`defaultValue`	`number \| number[]`	-	The default value (uncontrolled)
`onChange`	`(value: number \| number[]) => void`	-	Handler called when the value changes
`onChangeEnd`	`(value: number \| number[]) => void`	-	Handler called when dragging ends
`minValue`	`number`	`0`	The slider's minimum value
`maxValue`	`number`	`100`	The slider's maximum value
`step`	`number`	`1`	The slider's step value
`formatOptions`	`Intl.NumberFormatOptions`	-	The display format of the value label
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	The orientation of the slider
`isDisabled`	`boolean`	-	Whether the slider is disabled
`aria-label`	`string`	-	Accessibility label for the slider
`aria-labelledby`	`string`	-	ID of element that labels the slider
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode \| RenderFunction`	-	Slider content or render function
`render`	`DOMRenderFunction<keyof React.JSX.IntrinsicElements, SliderRenderProps>`	-	Overrides the default DOM element with a custom render function.

Slider.Output

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode \| RenderFunction`	-	Output content or render function
`render`	`DOMRenderFunction<keyof React.JSX.IntrinsicElements, SliderOutputRenderProps>`	-	Overrides the default DOM element with a custom render function.

Slider.Track

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode \| RenderFunction`	-	Track content or render function
`render`	`DOMRenderFunction<keyof React.JSX.IntrinsicElements, SliderTrackRenderProps>`	-	Overrides the default DOM element with a custom render function.

Slider.Fill

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`style`	`CSSProperties`	-	Inline styles

Slider.Thumb

Prop	Type	Default	Description
`index`	`number`	`0`	Index of the thumb within the slider
`isDisabled`	`boolean`	-	Whether this thumb is disabled
`name`	`string`	-	The name of the input element, used when submitting an HTML form
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode \| RenderFunction`	-	Thumb content or render function
`render`	`DOMRenderFunction<keyof React.JSX.IntrinsicElements, SliderThumbRenderProps>`	-	Overrides the default DOM element with a custom render function.

Render Props

When using render functions with Slider.Output or Slider.Track, these values are provided:

Prop	Type	Description
`state`	`SliderState`	The state of the slider
`values`	`number[]`	Values managed by the slider by thumb index
`getThumbValueLabel`	`(index: number) => string`	Returns the string label for the specified thumb's value
`orientation`	`"horizontal" \| "vertical"`	The orientation of the slider
`isDisabled`	`boolean`	Whether the slider is disabled

Examples

Basic Usage

1import { Slider, Label } from '@lenso/ui';2
3<Slider defaultValue={30}>4  <Label>Volume</Label>5  <Slider.Output />6  <Slider.Track>7    <Slider.Fill />8    <Slider.Thumb />9  </Slider.Track>10</Slider>

Range Slider

1import { Slider, Label } from '@lenso/ui';2
3<Slider4  defaultValue={[100, 500]}5  formatOptions={{style: "currency", currency: "USD"}}6  maxValue={1000}7  minValue={0}8  step={50}9>10  <Label>Price Range</Label>11  <Slider.Output />12  <Slider.Track>13    {({state}) => (14      <>15        <Slider.Fill />16        {state.values.map((_, i) => (17          <Slider.Thumb key={i} index={i} />18        ))}19      </>20    )}21  </Slider.Track>22</Slider>

Controlled Value

1import { Slider, Label } from '@lenso/ui';2import { useState } from 'react';3
4function ControlledSlider() {5  const [value, setValue] = useState(25);6
7  return (8    <>9      <Slider value={value} onChange={setValue}>10        <Label>Volume</Label>11        <Slider.Output />12        <Slider.Track>13          <Slider.Fill />14          <Slider.Thumb />15        </Slider.Track>16      </Slider>17      <p>Current value: {value}</p>18    </>19  );20}

Custom Value Formatting

1import { Slider, Label } from '@lenso/ui';2
3<Slider4  defaultValue={60}5  formatOptions={{style: "currency", currency: "USD"}}6>7  <Label>Price</Label>8  <Slider.Output />9  <Slider.Track>10    <Slider.Fill />11    <Slider.Thumb />12  </Slider.Track>13</Slider>

Vertical Orientation

1import { Slider, Label } from '@lenso/ui';2
3<Slider defaultValue={30} orientation="vertical" aria-label="Volume">4  <Label>Volume</Label>5  <Slider.Output />6  <Slider.Track>7    <Slider.Fill />8    <Slider.Thumb />9  </Slider.Track>10</Slider>

Custom Output Display

1import { Slider, Label } from '@lenso/ui';2
3<Slider defaultValue={[25, 75]}>4  <Label>Range</Label>5  <Slider.Output>6    {({state}) =>7      state.values.map((_, i) => state.getThumbValueLabel(i)).join(' – ')8    }9  </Slider.Output>10  <Slider.Track>11    {({state}) => (12      <>13        <Slider.Fill />14        {state.values.map((_, i) => (15          <Slider.Thumb key={i} index={i} />16        ))}17      </>18    )}19  </Slider.Track>20</Slider>

Accessibility

The Slider component implements the ARIA slider pattern and provides:

Full keyboard navigation support (Arrow keys, Home, End, Page Up/Down)
Screen reader announcements for value changes
Proper focus management
Support for disabled states
HTML form integration via hidden input elements
Internationalization support with locale-aware value formatting
Right-to-left (RTL) language support

For more information, see the React Aria Slider documentation.

Label

Renders an accessible label associated with form controls

Form

Wrapper component for form validation and submission handling

Description

Provides supplementary text for form fields and other components

Slider

Usage

Anatomy

Examples

Disabled

Range Slider Anatomy

Vertical

Range

Render Function

Customization

Tailwind CSS

Global CSS

Styling Reference

CSS Classes

Base Classes [!toc]

State Classes [!toc]

Interactive States

API Reference

Slider

Slider.Output

Slider.Track

Slider.Fill

Slider.Thumb

Render Props

Examples

Basic Usage

Range Slider

Controlled Value

Custom Value Formatting

Vertical Orientation

Custom Output Display

Accessibility

Related Components