Slider

The Slider component is a media progress control inspired by video player timelines. It features a draggable thumb, real-time time display, and an optional chapter toggle.

Preview

20:22-1:09:01

Usage

Installation

$ pnpm dlx shadcn add https://klarden.vercel.app/r/slider.json

Basic Example

"use client";

import { Slider } from "@/registry/klarden-ui/slider";
import { useState } from "react";

export default function Example() {
  const [value, setValue] = useState(122);
  const max = 5363;

  return (
    <Slider
      value={value}
      max={max}
      onValueChange={setValue}
      onValueCommit={setValue}
    />
  );
}

Properties

Prop	Type	Default	Description
`value`	`number`	`—`	Current progress value in seconds. Required.
`max`	`number`	`—`	Maximum value (total duration) in seconds. Required.
`onValueChange`	`(value: number) => void`	`—`	Callback when value changes during drag.
`onValueCommit`	`(value: number) => void`	`—`	Callback when dragging ends (mouseup).
`color`	`SliderColor`	`"default"`	Color variant for the track fill and thumb. Options: default, blue, purple, pink, red, orange, green, teal, cyan, indigo, violet, rose, amber, lime, sky, emerald, fuchsia.
`thumb`	`"circle" \| "square" \| "diamond" \| "rounded" \| "line"`	`"circle"`	Shape variant for the slider thumb.
`showRemaining`	`boolean`	`true`	Show remaining time as negative (true) or total duration as positive (false).
`disabled`	`boolean`	`false`	Disables all interactions.
`className`	`string`	`—`	Additional CSS classes for the container.