---
title: Slider
description: "An input where the user selects a value from within a given range."
---

```tsx
import * as stylex from '@stylexjs/stylex';

import { Slider } from '@/components/ui/slider';
import { container } from '@/lib/constants.stylex';

export default function SliderDemo() {
  return <Slider defaultValue={50} style={styles.root} />;
}

const styles = stylex.create({
  root: {
    maxWidth: container.sm,
  },
});
```

## Install

```bash
npx shadcn@latest add @madeui/slider
```

## Usage

```tsx
import { Slider } from '@/components/ui/slider';
```

## Range

Pass an array to render one thumb per value.

```tsx
import * as stylex from '@stylexjs/stylex';

import { Slider } from '@/components/ui/slider';
import { container } from '@/lib/constants.stylex';

export default function SliderRange() {
  return <Slider defaultValue={[25, 75]} style={styles.root} />;
}

const styles = stylex.create({
  root: {
    maxWidth: container.sm,
  },
});
```

## Vertical

Use `orientation="vertical"` for a vertical slider.

```tsx
import { Slider } from '@/components/ui/slider';

export default function SliderVertical() {
  return <Slider orientation="vertical" defaultValue={[40]} />;
}
```

## Controlled

Pass `value` and `onValueChange` to control the slider and read its value.

```tsx
'use client';

import * as React from 'react';

import * as stylex from '@stylexjs/stylex';

import { Slider } from '@/components/ui/slider';
import { container, fontSize, space } from '@/lib/constants.stylex';
import { colors, font } from '@/lib/tokens.stylex';

export default function SliderControlled() {
  const [value, setValue] = React.useState([40]);

  return (
    <div {...stylex.props(styles.row)}>
      <Slider
        value={value}
        onValueChange={(next) => setValue(next)}
        style={styles.slider}
      />
      <span {...stylex.props(styles.value)}>{value[0]}</span>
    </div>
  );
}

const styles = stylex.create({
  row: {
    alignItems: 'center',
    display: 'flex',
    gap: space.s4,
    width: container.md,
  },
  slider: {
    flex: 1,
  },
  value: {
    color: colors.mutedForeground,
    fontFamily: font.sans,
    fontSize: fontSize.sm,
    fontVariantNumeric: 'tabular-nums',
    width: space.s8,
  },
});
```

## Disabled

Use the `disabled` prop to disable the slider.

```tsx
import * as stylex from '@stylexjs/stylex';

import { Slider } from '@/components/ui/slider';
import { container } from '@/lib/constants.stylex';

export default function SliderDisabled() {
  return <Slider disabled defaultValue={[40]} style={styles.root} />;
}

const styles = stylex.create({
  root: {
    maxWidth: container.sm,
  },
});
```

## API reference

Built on [Base UI Slider](https://base-ui.com/react/components/slider). All props are forwarded to the Base UI `Root` (`value`, `defaultValue`, `min`, `max`, `step`, `orientation`, `disabled`, `onValueChange`, …) — see the [Base UI Slider API reference](https://base-ui.com/react/components/slider#api-reference). The component renders the control, track, indicator, and thumbs itself (with `thumbAlignment="edge"`) and accepts a `style` prop (`StyleXStyles`, merged last) on the root.