# Slider: Right to left

> Inside a right-to-left parent the fill starts from the right and the arrow keys follow it. Pass `locale` for the reader's digits.

Example: https://hextaui.com/docs/slider/examples/rtl
Component docs: https://hextaui.com/docs/slider.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/slider-rtl.json
```

This adds `components/examples/slider/rtl.tsx` with the Slider component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/slider/rtl.tsx"
import { Slider, SliderLabel, SliderValue } from "@/components/ui/slider"

export function SliderRtl() {
  return (
    <div dir="rtl" className="flex w-full max-w-xs flex-col gap-8">
      <Slider defaultValue={65} locale="ar-EG">
        <SliderLabel>مستوى الصوت</SliderLabel>
        <SliderValue />
      </Slider>
      <Slider defaultValue={[20, 70]} locale="ar-EG" draggableRange>
        <SliderLabel>النطاق</SliderLabel>
        <SliderValue />
      </Slider>
    </div>
  )
}
```

## Props in this example

### Slider

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `defaultValue` | `number \| number[]` | – |  |
| `draggableRange` | `boolean` | `false` | In a range, dragging between the thumbs moves them together, keeping the gap. |
| `locale` | `Intl.LocalesArgument` | `"en-US"` |  |

## More Slider examples

- [Sizes](https://hextaui.com/docs/slider/examples/sizes.md)
- [Range](https://hextaui.com/docs/slider/examples/range.md)
- [Value bubble](https://hextaui.com/docs/slider/examples/value-bubble.md)
- [Steps and format](https://hextaui.com/docs/slider/examples/steps.md)
- [Controlled](https://hextaui.com/docs/slider/examples/controlled.md)
- [Vertical](https://hextaui.com/docs/slider/examples/vertical.md)
- [With icons](https://hextaui.com/docs/slider/examples/icons.md)
- [Disabled](https://hextaui.com/docs/slider/examples/disabled.md)
- [Long labels](https://hextaui.com/docs/slider/examples/long-label.md)