@urban-ui/slider

@urban-ui/slider

control | slider

Styled version of radix-ui/slider

Getting started

pnpm add -S @urban-ui/slider

import * as Slider from '@urban-ui/slider'

export function MyComponent() {
  return (
    <Slider.Root defaultValue={[50]} max={100} step={1} aria-label='Volume'>
      <Slider.Track>
        <Slider.Range />
      </Slider.Track>
      <Slider.Thumb />
    </Slider.Root>
  )
}

Details

Styled wrapper around radix-ui/slider. Components are named the same and will accept the same props.

API

Slider.Root

Prop	Type	Description
size	'sm' | 'md' | 'lg'	Applies the control field token scale. Determines the interactive zone.
width	'normal' | 'full'	Defaults to normal

Slider.Track

Size xs is the default and is smaller than the thumb. The other sizes match the control field token scale and will match the thumb size.

Prop	Type	Description
tone	'primary' | 'critical' | 'neutral' | 'highlight'	Defaults to neutral
size	'xs' | 'sm' | 'md' | 'lg'	Height of the track. Defaults to xs.

Slider.Range

The range denotes the ranged part of the track, this is usually left-to-right and so the range will typically be on the left.

Defaults to no tone at all.

Prop	Type	Description
tone	'primary' | 'critical' | 'neutral' | 'highlight'	Defaults to neutral

Slider.Thumb

The space prop adds a small external border to the thumb, this will be the current colour and defaults to white. This provides visual separation from the track. If your background is a different colour then use the css prop to define a new colour. Be wary of gradient backgrounds.

Disabled state also applies the same coloured external border.

Prop	Type	Description
tone	'primary' | 'critical' | 'neutral' | 'highlight'	Defaults to neutral
size	'xs' | 'sm' | 'md' | 'lg'	Height of the track. Defaults to xs.
type	'clear'	Clears styling, useful for icons.
space	boolean	Defaults to false