# Slider

Precisely adjust a value or interval.

## How to use it

value and defaultValue are arrays. Use min, max and step to define the allowed range; add an accessible label.



## Import


```tsx
import { Slider } from "@kivora/nextjs";
```


Examples run in a Client Component. Also import the hooks, icons and dependencies used. This is the web API; consult the native guide for React Native.

## Example


```tsx
<Slider aria-label="Volume" defaultValue={[65]} min={0} max={100} step={5} showValue style={{width:280}} />
```


## Range

```tsx
<Slider aria-label="Price range" defaultValue={[25,75]} min={0} max={100} showValue style={{width:280}} />
```


## API: Slider


```typescript
Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLSpanElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| aria-label | string | No | Accessible name of the control. |
| asChild | boolean | No | Apply props and behavior to a single compatible child element. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | number[] | No | Initial value when the component manages its own state. |
| dir | "ltr" \| "rtl" | No | Interface reading direction. |
| disabled | boolean | No | Disable interaction with the control. |
| form | string | No | See the published type. |
| formatValue | ((value: number, index: number, values: number[]) => ReactNode) | No | Format the value for display. |
| id | string | No | Element identifier; associates labels and descriptions. |
| inverted | boolean | No | See the published type. |
| max | number | No | Maximum allowed value. |
| min | number | No | Minimum allowed value. |
| minStepsBetweenThumbs | number | No | See the published type. |
| name | string | No | Name used to identify the control in forms. |
| onChange | ChangeEventHandler<HTMLDivElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLDivElement> | No | Action performed when the element is activated. |
| onSubmit | SubmitEventHandler<HTMLDivElement> | No | Form submission event. |
| onValueChange | ((value: number[]) => void) | No | Receives the value after an interaction. |
| onValueCommit | ((value: number[]) => void) | No | See the published type. |
| orientation | "horizontal" \| "vertical" | No | Horizontal or vertical axis. |
| rangeClassName | string | No | See the published type. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| showValue | boolean | No | Show the value label. |
| step | number | No | Increment between values. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| thumbClassName | string | No | See the published type. |
| title | string | No | Title or supplementary information. |
| trackClassName | string | No | See the published type. |
| value | number[] | No | Controlled value. Update it from the change callback. |
| valueLabelClassName | string | No | See the published type. |

Source: https://kivora.pro/docs/componentes/slider