Slider

A slider is an input where the user selects a value from within a given range.

Example

"use client";

import * as Slider from "@lora-ui/slider";

export default function Base() {
  return (
    <Slider.Root
      className="w-[328px]"
      min={100}
      max={200}
      step={10}
      value={150}
    >
      <Slider.Track className="relative flex h-2 w-full items-center rounded bg-[#eaecf0] hover:cursor-pointer dark:bg-[#333741]">
        <Slider.Range className="h-full rounded bg-[#7f56d9] dark:bg-[#7f56d9]" />
        <Slider.Thumb className="shadows-md absolute h-4 w-4 rounded-full border-2 border-[#7f56d9] bg-[#ffffff] outline-offset-2 dark:border-[#9e77ed] dark:bg-[#0c111d]" />
      </Slider.Track>
    </Slider.Root>
  );
}

Installation

Install the component from your command line.

npm install @lora-ui/slider

API Reference

Root

Prop	Type	Default	Explanation
onValueChange	Event	(value) => {}
min	Number	0	min value
max	Number	100	max value
value	Number	50	current value
step	Number	1	step value

Track

Prop	Type	Default	Explanation

Range

Prop	Type	Default	Explanation

Thumb

Prop	Type	Default	Explanation

Keyboard

Command	Description
ArrowRight	Increase the value of the slider by one step.
ArrowLeft	Decrease the value of the slider by one step.
Home	Set the slider to the first allowed value in its range.
End	Set the slider to the last allowed value in its range.

Other

All relevant ARIA attributes are automatically managed.