Slider

Pick a value or a range by dragging, tapping the track or using the keys, with jumps that glide and an optional value bubble.

bypreet from Hextaui

Installation

terminal

pnpm dlx layro-cli add @preetsuthar17/slider

npx layro-cli add @preetsuthar17/slider

npx layro-cli add @preetsuthar17/slider

bunx layro-cli add @preetsuthar17/slider

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"

import * as React from "react"
import {
  DirectionProvider,
  useDirection,
  type TextDirection,
} from "@base-ui/react/direction-provider"
import { Slider as SliderPrimitive } from "@base-ui/react/slider"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

type ClassName<State> =
  string | ((state: State) => string | undefined) | undefined