# @urban-ui/slider

> Styled version of radix-ui/slider

Latest version **0.1.0** (published 2023-03-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install @urban-ui/slider
pnpm add @urban-ui/slider
yarn add @urban-ui/slider
bun add @urban-ui/slider
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2023-03-20 |
| First published | 2023-03-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 57.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Matt Styles |
| Maintainers | mattstyles |
| Keywords | ui, react, components, urban-ui, stitches, radix-ui |

## Links

- npm: https://www.npmjs.com/package/@urban-ui/slider
- Repository: https://github.com/mattstyles/urban-ui
- Homepage: https://github.com/mattstyles/urban-ui#readme
- Issues: https://github.com/mattstyles/urban-ui/issues
- npm.io page: https://npm.io/package/@urban-ui/slider

## Dependencies (2)

- [@urban-ui/theme](https://npm.io/package/@urban-ui/theme.md) 0.1.0
- [@radix-ui/react-slider](https://npm.io/package/@radix-ui/react-slider.md) ^1.1.1

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@progress/kendo-vue-listbox](https://npm.io/package/@progress/kendo-vue-listbox.md) — 932 weekly downloads

## Recent versions

- 0.1.0 (latest) — 2023-03-20
- 0.0.2 — 2023-03-20

## README

# @urban-ui/slider

> control | slider

[![npm](https://img.shields.io/npm/v/@urban-ui/slider?style=flat-square)](https://www.npmjs.com/package/@urban-ui/slider)
[![minzip size](https://img.shields.io/bundlephobia/minzip/@urban-ui/slider?style=flat-square)](https://bundlephobia.com/result?p=@urban-ui/slider)
[![License](https://img.shields.io/github/license/mattstyles/urban-ui.svg?style=flat-square)](https://github.com/mattstyles/urban-ui/blob/master/license.md)

> Styled version of radix-ui/slider

## Getting started

```sh
pnpm add -S @urban-ui/slider
```

```js
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](https://www.radix-ui.com/docs/primitives/components/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                    |

---
_Source: https://npm.io/package/@urban-ui/slider · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._