# @askrjs/ui/slider

> Published API exports for @askrjs/ui/slider.

Source: [https://askrjs.com/docs/reference/api/ui/slider](https://askrjs.com/docs/reference/api/ui/slider)

Status: stable. Packages: @askrjs/ui/slider.

**Published packages are authoritative.** Examples may lag behind a published contract. When guidance differs, verify the exports and TypeScript declarations in your installed package, then file an issue.

## Exports

This entrypoint publishes 15 exports from the declarations shipped by @askrjs/ui.

### `Slider`

```ts
Slider: (props: SliderProps) => JSX.Element
```

Renders the `slider` part of `slider`.

### `SLIDER_A11Y_CONTRACT`

```ts
SLIDER_A11Y_CONTRACT: { readonly THUMB_ROLE: "slider"; readonly VALUE_NOW_ATTRIBUTE: "aria-valuenow"; readonly VALUE_MIN_ATTRIBUTE: "aria-valuemin"; readonly VALUE_MAX_ATTRIBUTE: "aria-valuemax"; readonly ORIENTATION_ATTRIBUTE: "aria-orientation"; readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; readonly disabled: "data-disabled"; readonly orientation: "data-orientation"; }; }
```

Slider accessibility contract.

### `SliderA11yContract`

```ts
SliderA11yContract: typeof SLIDER_A11Y_CONTRACT
```

Type of the Slider A11y Contract object.

### `SliderOrientation`

```ts
SliderOrientation: 'horizontal' | 'vertical'
```

Slider Orientation.

### `SliderOwnProps`

```ts
SliderOwnProps: {
  /** Supports literal, nested, array-mapped, and `For`-rendered descendants. */
  children?: unknown;
  id?: string;
  value?: number;
  defaultValue?: number;
  onValueChange?: (value: number) => void;
  min?: number;
  max?: number;
  step?: number;
  orientation?: SliderOrientation;
  disabled?: boolean;
  name?: string;
}
```

Own props for Slider, before merging with native element attributes.

- `children`: Supports literal, nested, array-mapped, and `For`-rendered descendants.

- `defaultValue`: defaultValue?: number | undefined;

- `disabled`: disabled?: boolean | undefined;

- `id`: id?: string | undefined;

- `max`: max?: number | undefined;

- `min`: min?: number | undefined;

- `name`: name?: string | undefined;

- `onValueChange`: onValueChange?: ((value: number) => void) | undefined;

- `orientation`: orientation?: SliderOrientation | undefined;

- `step`: step?: number | undefined;

- `value`: value?: number | undefined;

### `SliderProps`

```ts
SliderProps: BoxProps<'div', HTMLDivElement> & SliderOwnProps
```

Props for Slider.

- `asChild`: asChild?: false | undefined;

- `children`: Supports literal, nested, array-mapped, and `For`-rendered descendants.

- `defaultValue`: defaultValue?: number | undefined;

- `disabled`: disabled?: boolean | undefined;

- `id`: id?: string | undefined;

- `max`: max?: number | undefined;

- `min`: min?: number | undefined;

- `name`: name?: string | undefined;

- `onValueChange`: onValueChange?: ((value: number) => void) | undefined;

- `orientation`: orientation?: SliderOrientation | undefined;

- `ref`: ref?: Ref<HTMLDivElement>;

- `step`: step?: number | undefined;

- `value`: value?: number | undefined;

### `SliderRange`

```ts
SliderRange: { (props: SliderRangeProps): JSX.Element; (props: SliderRangeAsChildProps): JSX.Element; }
```

Renders the `slider-range` part of `slider`.

Supports polymorphic rendering via `asChild`.

### `SliderRangeAsChildProps`

```ts
SliderRangeAsChildProps: BoxAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Slider Range.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `SliderRangeProps`

```ts
SliderRangeProps: BoxProps<'div', HTMLDivElement>
```

Props for Slider Range.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLDivElement>;

### `SliderThumb`

```ts
SliderThumb: { (props: SliderThumbProps): JSX.Element; (props: SliderThumbAsChildProps): JSX.Element; }
```

Renders the `slider-thumb` part of `slider` with `role="slider"`.

Supports polymorphic rendering via `asChild`.

### `SliderThumbAsChildProps`

```ts
SliderThumbAsChildProps: BoxAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Slider Thumb.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `SliderThumbProps`

```ts
SliderThumbProps: BoxProps<'div', HTMLDivElement>
```

Props for Slider Thumb.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLDivElement>;

### `SliderTrack`

```ts
SliderTrack: { (props: SliderTrackProps): JSX.Element; (props: SliderTrackAsChildProps): JSX.Element; }
```

Renders the `slider-track` part of `slider`.

Supports polymorphic rendering via `asChild`.

### `SliderTrackAsChildProps`

```ts
SliderTrackAsChildProps: BoxAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Slider Track.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `SliderTrackProps`

```ts
SliderTrackProps: BoxProps<'div', HTMLDivElement>
```

Props for Slider Track.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLDivElement>;

## Documentation navigation

[Previous](https://askrjs.com/docs/reference/api/ui/select/index.md) | [Next](https://askrjs.com/docs/reference/api/ui/switch/index.md)