About
A labeled range slider for picking a numeric value, with an optional live value readout and custom formatting, built on a native range input for full keyboard and touch support.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Range Slider to your project and fits it to your theme.
Code
How Range Slider is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"use client";
import Slider from "@/components/ui/slider";
import { useState } from "react";
export default function SliderDemo() {
const [volume, setVolume] = useState(35);
return (
<div className="mors-scope flex w-full max-w-sm flex-col gap-6 p-6">
<Slider
label="Volume"
value={volume}
onValueChange={setVolume}
formatValue={(value) => `${value}%`}
/>
<Slider label="Steps of 10" defaultValue={40} step={10} showValue />
<Slider label="Small" size="sm" defaultValue={70} showValue />
<Slider label="Disabled" defaultValue={20} disabled showValue />
</div>
);
}
More by murad-sinatra
View all
Table
Command Palette
Toggles
Icon
Number Field
More in Forms
View all
Premium Auth
517
Contact Card
1K
Book A Demo 1
72
Authentication Card
48
Login 1
52
Login Card
6
Form
16
Modern & Stunning sign in
1.6K
