File size: 1,299 Bytes
529c982 8b65a0f 529c982 8b65a0f 529c982 8b65a0f 529c982 8b65a0f 529c982 8b65a0f 529c982 8b65a0f 529c982 8b65a0f 529c982 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | 'use client';
import { Slider } from '@/components/ui/slider';
import { Label } from '@/components/ui/label';
export interface RangeInputProps {
label: string;
value?: number;
defaultValue?: number;
min: number;
max: number;
step?: number;
onChange: (value: number) => void;
className?: string;
disabled?: boolean;
showValue?: boolean;
valueUnit?: string;
helpText?: string;
}
export default function RangeInput({
label,
value,
defaultValue = 1,
min,
max,
step = 1,
onChange,
className = '',
disabled = false,
showValue = true,
valueUnit = '',
helpText,
}: RangeInputProps) {
const currentValue = value ?? defaultValue;
return (
<div className={className}>
<Label>
{label}
</Label>
<Slider
min={min}
max={max}
step={step}
value={[currentValue]}
onValueChange={([val]) => onChange(val)}
disabled={disabled}
className="mt-2"
/>
{showValue && (
<div className="text-center text-sm text-muted-foreground mt-1">
{currentValue} {valueUnit} {helpText}
</div>
)}
{!showValue && helpText && (
<div className="text-xs text-muted-foreground mt-1">
{helpText}
</div>
)}
</div>
);
} |