Slider

An input where the user selects a value from within a given range.

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 @madeui/cli add slider

Usage

TSX

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

Range

Pass an array to render one thumb per value.

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.

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.

'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 } 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(Array.isArray(next) ? next : [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,
    fontSize: fontSize.sm,
    fontVariantNumeric: 'tabular-nums',
    width: space.s8,
  },
});

Disabled

Use the disabled prop to disable the slider.

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,
  },
});

Built on Base UI 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. The component renders the control, track, indicator, and thumbs itself (with thumbAlignment="edge") and accepts a style prop (StyleXStyles, merged last) on the root.