Slider

An input that allows the user to choose a value within a specified range.

Preview
Code

Installation

npm
yarn
pnpm
bun

npm i @melio-ui/slider

If @melio-ui/react is already installed globally, you can skip this step.

Import

Individual
Global

import { 
  SliderRoot,
  SliderTrack,
  SliderRange,
  SliderThumb,
  SliderThumbLabel,
} from '@melio-ui/slider';

SliderRoot: All parts of the slider are included.
SliderTrack: The unfilled portion of the slider that displays the track.
SliderRange: The filled portion of the slider.
SliderThumb: The knob used to adjust the slider value.
SliderThumbLabel: The label displayed for slider values.

Another way to import

'use client';

import { Slider } from '@melio-ui/slider';

<Slider.Root defaultValue={20}>
  <Slider.Track>
    <Slider.Range />
  </Slider.Track>
  <Slider.Thumb>
    <Slider.ThumbLabel />
  </Slider.Thumb>
</Slider.Root>;

'use client' must be used when rendering on the server side.

API Reference

SliderRoot

All parts of the slider are included.

Prop	Type	Default	Description
value	`number \| number[]`	-	The slider value.
defaultValue	`number \| number[]`	-	The initial value of the slider when first rendered, for use when state control isn't needed.
min	`number`	0	Minimum value of slider.
max	`number`	100	Maximum value for slider.
step	`number`	1	Steps used to increase or decrease values.
orientation	`TypeAttributes.Orientation "horizontal" \| "vertical"`	-	Direction for the placement of the Slider component.
disabled	`boolean`	-	Determines whether the slider is inactive.
onValueChange	`(value: number \| number[], activeIndex: number) => void`	-	This is an event handler that is triggered when the state of a slider changes.

Data attribute	Values
[data-orientation]	"horizontal" \| "vertical"
[data-disabled]	Visible when disabled

SliderTrack

The unfilled portion of the slider that displays the track.

Data attribute	Values
[data-orientation]	"horizontal" \| "vertical"
[data-disabled]	Visible when disabled

SliderRange

The filled portion of the slider.

Data attribute	Values
[data-orientation]	"horizontal" \| "vertical"
[data-disabled]	Visible when disabled

SliderThumb

The knob used to adjust the slider value.

Data attribute	Values
[data-orientation]	"horizontal" \| "vertical"
[data-disabled]	Visible when disabled

SliderThumbLabel

The label displayed for slider values.

Prop	Type	Default	Description
auto	`boolean`	-	Display a label when hovering over the Slider Thumb.

Data attribute	Values
[data-orientation]	"horizontal" \| "vertical"
[data-disabled]	Visible when disabled

Examples

Disabled

<SliderRoot defaultValue={30} disabled>
  <SliderTrack>
    <SliderRange />
  </SliderTrack>
  <SliderThumb />
</SliderRoot>

Set the minimum and maximum values

<SliderRoot min={10} max={120} defaultValue={30}>
  <SliderTrack>
    <SliderRange />
  </SliderTrack>
  <SliderThumb />
</SliderRoot>

Set step size

<SliderRoot min={10} max={120} step={10} defaultValue={30}>
  <SliderTrack>
    <SliderRange />
  </SliderTrack>
  <SliderThumb />
</SliderRoot>

Display Thumb Label

<SliderRoot defaultValue={20}>
  <SliderTrack>
    <SliderRange />
  </SliderTrack>
  <SliderThumb>
    <Slider.ThumbLabel />
  </SliderThumb>
</SliderRoot>

Orientation

<SliderRoot orientation="vertical" style={{ height: 150 }}>
  <SliderTrack>
    <SliderRange />
  </SliderTrack>
  <SliderThumb>
    <Slider.ThumbLabel />
  </SliderThumb>
</SliderRoot>

Range

<SliderRoot defaultValue={[20, 60]}>
  <SliderTrack>
    <SliderRange />
  </SliderTrack>
  <SliderThumb />
  <SliderThumb />
</SliderRoot>

RadioGroup

Steps