Slider

import { Flex } from "@hel/ui/flex"
import { Slider, SliderControl, SliderLabel, SliderValue } from "@hel/ui/slider"

When to use it#

Use a slider for a value where roughly right is good enough and the position along the range matters more than the exact number: brightness, volume, a budget. If people need to enter an exact number, use a Number Field. The two work well together when both are needed.

Arrow keys move the thumb by one step, Page Up and Page Down by a larger step, and Home and End jump to the ends.

Import#

Copyimport { Slider, SliderControl, SliderLabel, SliderValue } from "@hel/ui/slider"

Anatomy#

Slider holds the value and the range. SliderControl draws the track and the thumb. SliderLabel and SliderValue are optional, and you place them where you like, usually in a row above the control.

Copy<Slider defaultValue={60} className="w-72">
  <Flex justify="between" align="center" className="w-full">
    <SliderLabel>Screen brightness</SliderLabel>
    <SliderValue />
  </Flex>
  <SliderControl />
</Slider>

The slider takes the width of its container, so give it a width with className. When there is no visible label, give the slider an aria-label so a screen reader can name it.

Examples#

Icons#

leadingIcon and trailingIcon sit on either side of the track. A pair like a quiet and a loud speaker shows what the two ends mean without any text.

import { Volume, Volume2 } from "lucide-react"

import { Slider, SliderControl } from "@hel/ui/slider"

Range and steps#

min, max and step define what values are possible. The default range is 0 to 100 in steps of 1. To show your own text next to the slider, such as a currency, keep the value in state with value and onValueChange, and write it yourself.

import * as React from "react"

import { Flex } from "@hel/ui/flex"

Vertical#

Set orientation="vertical" for a slider that moves up and down. Icons flip to the top and bottom with it. A row of them makes a mixer, like an equalizer.

import { Flex } from "@hel/ui/flex"
import { Slider, SliderControl } from "@hel/ui/slider"
import { Stack } from "@hel/ui/stack"

Good to know#

A slider has a single thumb. For a value that could be a range, such as a minimum and a maximum price, use two Number Fields.

States#

disabled greys the slider out and removes the hover and focus rings, since nothing can be done with it.

Props#

Slider#

onValueCommitted is called when the person lets go of the thumb, which is the moment to save the value. It also takes every prop of the Base UI slider.

SliderControl#

SliderLabel and SliderValue#

SliderLabel is the visible name of the slider. SliderValue shows the current value. Both take the props of a normal element, and SliderValue can also be given a function as its children to format the number.