Moul UIBeta
Components

Slider

Documentation for the Slider component.

React Aria

Slider

Preview

Interactive
40

Properties

Live Code Snippet
import { Slider, SliderTrack, SliderThumb } from '@moul-dev/ui';
import { useState } from 'react';

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

  return (
    <Slider
      value={value}
      onChange={setValue} label="Brightness Level" defaultValue={40}
    >
      <SliderTrack>
        <SliderThumb />
      </SliderTrack>
    </Slider>
  );
}

The Slider component is built with React Aria and styled using StyleX.

Import

import { Slider } from '@moul-dev/ui';

Usage

Here is a basic example of how to use the Slider component:

import { Slider } from '@moul-dev/ui';

export default function Example() {
  return (
    <Slider>
      {/* Component content */}
    </Slider>
  );
}

Props

Slider Props

Prop

Type

Default className: react-aria-Slider

Render PropCSS Selector
isDisabled
Whether the slider is disabled.		[data-disabled]
orientation
The orientation of the slider.		[data-orientation]

Skeleton

Documentation for the Skeleton component.

Spinner

Documentation for the Spinner component.

On this page

SliderPreviewImportUsagePropsSlider Props