🎨
UI Knihovna
Kolekce nádherných, znovupoužitelných React komponent a CSS fragmentů vytvořená pomocí Tailwind CSS a Framer Motion.
Posuvníky
Ovládací prvky pro výběr hodnoty z určitého rozsahu.
Základní posuvník
50%
Slider.tsxLanguage: tsx
import { useState } from 'react';
export function BasicSlider() {
const [value, setValue] = useState(50);
return (
<div className="w-full max-w-sm">
<div className="flex justify-between mb-2">
<label className="text-sm font-medium text-foreground">Volume</label>
<span className="text-sm font-medium text-muted">{value}%</span>
</div>
<input
type="range"
min="0"
max="100"
value={value}
onChange={(e) => setValue(Number(e.target.value))}
className="w-full h-2 bg-surface border border-border rounded-lg appearance-none cursor-pointer accent-accent"
/>
</div>
);
}