Koori UI
Components

GlassSlider

A glassmorphism-styled range slider powered by Radix UI.

Preview

Usage

import { GlassSlider } from "koori-ui";
 
<GlassSlider defaultValue={[50]} max={100} step={1} />

Controlled

import { useState } from "react";
import { GlassSlider } from "koori-ui";
 
function Example() {
  const [value, setValue] = useState([40]);
  return (
    <GlassSlider
      value={value}
      onValueChange={setValue}
      max={100}
      step={5}
    />
  );
}

Range (Two Thumbs)

<GlassSlider defaultValue={[20, 80]} max={100} step={1} />

Disabled

<GlassSlider defaultValue={[30]} disabled />

Props

PropTypeDefaultDescription
valuenumber[]Controlled value(s)
defaultValuenumber[]Initial value(s) (uncontrolled)
onValueChange(value: number[]) => voidCallback on change
minnumber0Minimum value
maxnumber100Maximum value
stepnumber1Step increment
disabledbooleanfalseDisables the slider
orientation"horizontal" | "vertical""horizontal"Slider orientation

All Radix Slider.Root props are also accepted.

On this page