Slider

Ready

Select a value from a range.

Requires radix-ui

Installation

$ npx @oratiq-js/ui add slider

Copies the component and everything it depends on into your project, then lists the npm packages to install. The code is yours after this.

import

import { Slider } from "@/components/ui/slider";

Arrow keys adjust by one step; Home and End jump to the bounds; Page Up/Down move by a larger increment.
Under RTL the fill and the arrow keys both invert, handled by Radix via the DirectionProvider.
Range sliders expose one thumb per value, each individually focusable and labelled.