1. Components
  2. Forms and inputs
  3. Slider

Slider

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

Aria docsReport an issueEdit this page
50
<Slider defaultValue={50} />

Installation

npx dotui-cli@latest add slider

Usage

Use slider to allow users to select a value from within a given range.

import { Slider } from "@/components/core/slider";
 
<Slider
  defaultValue={50}
  label="Opacity"
  description="Adjust the background opacity."
/>;
import {
  SliderRoot,
  SliderTrack
  SliderFiller,
  SliderThumb,
  SliderValueLabel
} from "@/components/core/switch";
import { Label, Description } from "@/components/core/field";
 
<SliderRoot defaultValue={50}>
  <Label>Opacity</Label>
  <ValueLabel />
  <SliderTrack>
    <SliderFiller />
    <SliderThumb />
  </SliderTrack>
  <Description>Adjust the background opacity.</Description>
</SliderRoot>;

Options

Size

Use the size prop to control the size of the slider. The default variant is "md".

50
50
50
<Slider size="sm" />
<Slider size="md" />
<Slider size="lg" />

Orientation

Sliders are horizontally oriented by default. The orientation prop can be set to "vertical" to create a vertical slider.

50
<Slider orientation="vertical" />

Label

A visual label can be provided using the label prop or a hidden label using aria-label prop.

50
50
<Slider label="Opacity" defaultValue={50} />
<Slider aria-label="Opacity" defaultValue={50} />

Description

A description can be supplied to the slider using the description prop.

50
Adjust the background opacity.
<Slider label="Opacity" description="Adjust the background opacity." />

Value label

The valueLabel boolean prop can be used to display the current value of the slider. The valueLabel prop can also be set to a function that returns a custom value label.

50
50 of 100 Donuts
<Slider label="Donuts to buy" valueLabel />
<Slider
  label="Donuts to buy"
  valueLabel={(donuts) => `${donuts[0]} of 100 Donuts`}
/>

Value scale

By default, slider values are precentages between 0 and 100. A different scale can be used by setting the minValue and maxValue props.

25
<Slider label="Cookies to buy" minValue={1} maxValue={50} />

Step

The step prop can be used to snap the value to certain increments.

0
<Slider label="Opacity" step={5} />

Format options

Values are formatted as a percentage by default, but this can be modified by using the formatOptions prop to specify a different format. formatOptions is compatible with the option parameter of Intl.NumberFormat and is applied based on the current locale.

¥60
<Slider label="Price" formatOptions={{ style: "currency", currency: "JPY" }} />

Range

Passing an array to the defaultValue or value props will create a range slider.

200 - 300
<Slider defaultValue={[200, 300]} />

Disabled

Use the isDisabled prop to disable the slider.

50
<Slider isDisabled />

Composition

If you need to customize things further, you can drop down to the composition level.

50
Adjust the volume.
<SliderRoot>
  <Label>Volume</Label>
  <SliderValueLabel />
  <div>
    <Volume1Icon />
    <SliderTrack>
      <SliderFiller />
      <SliderThumb />
    </SliderTrack>
    <Volume2Icon />
  </div>
</SliderRoot>

Uncontrolled

The defaultValue prop can be used to set the default state.

50
<Slider defaultValue={20} />

Controlled

Use the value and onChange props to control the value of the input.

50
Value: 50
const [value, setValue] = React.useState(50);
return <Slider value={value} onChange={(value) => setValue(value as number)} />;

API Reference

PropTypeDefaultDescription
size"sm" | "md" | "lg""md"The size of the slider.
valueLabelboolean | ((value: number[]) => string)falseWeather to display the value label. A function may be provided to customize the value label.
labelReactNodeThe content to display as the label.
descriptionReactNodeA description for the field. Provides a hint such as specific requirements for what to choose.
formatOptionsIntl.NumberFormatOptions-The display format of the value label.
orientation'horizontal' | 'vertical''horizontal'The orientation of the Slider.
isDisabledboolean-Whether the whole Slider is disabled.
minValuenumber0The slider's minimum value.
maxValuenumber100The slider's maximum value.
stepnumber1The slider's step value.
valueT-The current value (controlled).
defaultValueT-The default value (uncontrolled).
namestring-The name of the input element, used when submitting an HTML form.
childrenReactNode | (values: SliderRenderProps & {defaultChildren: ReactNode | undefined}) => ReactNode-The children of the component. A function may be provided to alter the children based on component state.
classNamestring | (values: SliderRenderProps & {defaultClassName: string | undefined}) => string-The CSS className for the element. A function may be provided to compute the class based on component state.
styleCSSProperties | (values: SliderRenderProps & {defaultStyle: CSSProperties}) => CSSProperties-The inline style for the element. A function may be provided to compute the style based on component state.
EventTypeDescription
onChange(value: T) => voidHandler that is called when the value changes.
onChangeEnd(value: T) => voidFired when the slider stops moving, due to being let go.
Data attributeDescription
[data-orientation="horizontal | vertical"]The orientation of the slider.
[data-disabled]Whether the slider is disabled.

Accessibility

Keyboard interactions

KeyDescription
TabPlaces focus on the handle. If the handle is already in focus, moves focus to the next handle or next element in the page tab sequence.
Shift+TabPlaces focus on the previous handle or previous element in the page tab sequence.
ArrowUp ArrowDown ArrowLeft ArrowRightMoves the handle up/down/left/right.
SwitchForm
dotUI

Bringing singularity to the web.

Community

Built by mehdibha. The source code is available on GitHub.