Slider

Slider is a compound component for selecting one or several numbers from a bounded range.

Overview

Slider sets its size and colors as CSS variables on the root; SliderTrack, SliderRange, SliderThumbInput and SliderThumbIndicator read them. Thumb and range positions are CSS variables written by the slider, so custom styles can use them too.

Public CSS Variables

Variable	Value	Affects
base visual scale, the track thicknesstrack, thumb		No visible change in this state
border-radius ratiotrack		No visible change in this state
thumb size, `--slider-size * 3` by default; also the root thicknessroot, thumb		No visible change in this state
filled track colorrange		No visible change in this state
thumb fill colorthumb		No visible change in this state
default thumb borderthumb		No visible change in this state
hover borderthumb		No visible change in this state
active borderthumb		No visible change in this state
focus outlinethumb focus		No visible change in this state
Radius ratio of the thumb.`SliderThumbIndicator`		No visible change in this state
Border width of the thumb relative to its size.`SliderThumbIndicator`		No visible change in this state

Edit a value to try it in the demo. Hover a variable to outline what it changes; switch the preview state to see hover, pressed, focus, disabled and invalid variables. Click a name to copy it.

Part-Level Variables

Root

Sets --slider-range-start and --slider-range-end, from 0 at min to 1 at max.

Thumb

SliderThumb sets --slider-thumb-position, from 0 to 1, and --slider-thumb-start/--slider-thumb-end, the part of the track its input covers; CSS variables set in its style reach both parts. SliderThumbIndicator is the visible handle and takes any className, style and content. Change the thumb size with --slider-thumb-size, not width/height of the indicator: the native thumb that takes the pointer uses the variable. SliderThumbInput is invisible, stretched over its part of the track and cut by clip-path at the midpoints to its neighbours (--slider-thumb-clip-start/--slider-thumb-clip-end); it takes the pointer, and its hover, active, focus and disabled states restyle the indicator of the same SliderThumb.

Range

SliderRange spans from --slider-range-start to --slider-range-end.

State And Variant Interaction

size maps to --slider-size
primary and secondary variants remap range and thumb border colors
disabled remaps range and thumb colors to disabled tokens; a disabled thumb alone does the same for its thumb
hover, active, focus and disabled states of a thumb follow its native input

Examples

Secondary slider

LTRRTL

secondary-slider.tsx · 22 lines

import {
  Slider,
  SliderRange,
  SliderThumb,
  SliderThumbIndicator,
  SliderThumbInput,
  SliderTrack,
} from '@vega-ui/react';

export default function SecondarySlider() {
  return (
    <Slider variant='secondary' defaultValue={25} style={{ width: '100%', maxWidth: 400 }}>

Do Not Override

breaking the relationship between track size and thumb size
removing focus styling from the thumb
making the native input visible or changing its size