@urban-ui/slider v0.1.0

@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

### 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.

### 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.

### 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.