Slider with Label

PreviousNext

A slider component with a label

Docs
shadcnui-blockscomponent

Preview

Loading preview…
components/customized/slider/slider-06.tsx
"use client";

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

export default function SliderWithLabelDemo() {
  const [progress, setProgress] = useState([30]);

  return (
    <div className="w-full max-w-sm flex items-center gap-2">
      <Slider value={progress} onValueChange={setProgress} max={100} step={1} />
      <span className="w-[5ch]">{progress[0]}%</span>
    </div>
  );
}

Installation

npx shadcn@latest add @shadcnui-blocks/slider-06

Usage

import { Slider06 } from "@/components/slider-06"
<Slider06 />