Range Sliders

1'use client';
2import { useState, type ReactNode } from 'react';
3import Link from 'next/link';
4import { Code2 } from 'lucide-react';
5
6function SectionCard({ title, sourceSlug, children }: { title: string; sourceSlug?: string; children: ReactNode }) {
7  return (
8    <div>
9      <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
10        <h3 className="text-theme-xl font-semibold text-gray-800 dark:text-white/90">{title}</h3>
11        {sourceSlug && (
12          <Link
13            href={sourceSlug}
14            className="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium text-brand-500 transition-colors hover:bg-brand-50 dark:text-brand-400 dark:hover:bg-brand-500/10"
15          >
16            <Code2 className="size-3.5" />
17            View Source
18          </Link>
19        )}
20      </div>
21      <div className="rounded-xl border border-gray-200 bg-white p-6 dark:border-white/5 dark:bg-gray-dark">
22        {children}
23      </div>
24    </div>
25  );
26}
27
28export function RangeSlidersSection() {
29  const [value, setValue] = useState(50);
30
31  return (
32    <SectionCard title="Range Sliders" sourceSlug="/ui/source/ui-elements/range-sliders">
33      <div className="space-y-6 max-w-md">
34        {/* Basic */}
35        <div>
36          <div className="mb-2 flex justify-between">
37            <label className="text-sm font-medium text-gray-700 dark:text-gray-300">Volume</label>
38            <span className="text-sm font-medium text-brand-500">{value}%</span>
39          </div>
40          <input type="range" min={0} max={100} value={value} onChange={(e) => setValue(Number(e.target.value))} className="w-full h-2 rounded-full bg-gray-200 dark:bg-white/10 appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-brand-500 [&::-webkit-slider-thumb]:shadow-md [&::-webkit-slider-thumb]:cursor-pointer" />
41        </div>
42        {/* With markers */}
43        <div>
44          <label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">Brightness</label>
45          <input type="range" min={0} max={100} defaultValue={65} className="w-full h-2 rounded-full bg-gray-200 dark:bg-white/10 appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-success-500 [&::-webkit-slider-thumb]:shadow-md [&::-webkit-slider-thumb]:cursor-pointer" />
46          <div className="mt-1 flex justify-between text-[10px] text-gray-400">
47            <span>0%</span><span>25%</span><span>50%</span><span>75%</span><span>100%</span>
48          </div>
49        </div>
50        {/* Color variants */}
51        <div>
52          <label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">Temperature</label>
53          <input type="range" min={0} max={100} defaultValue={40} className="w-full h-2 rounded-full appearance-none cursor-pointer bg-gradient-to-r from-blue-light-300 via-success-300 to-error-300 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-gray-300 [&::-webkit-slider-thumb]:shadow-md [&::-webkit-slider-thumb]:cursor-pointer" />
54          <div className="mt-1 flex justify-between text-xs text-gray-400">
55            <span>Cold</span><span>Warm</span><span>Hot</span>
56          </div>
57        </div>
58      </div>
59    </SectionCard>
60  );
61}