Spaces:
Running
Running
File size: 1,363 Bytes
d54a751 | 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 | 'use client';
import type { CSSProperties } from 'react';
/**
* Claymorphism slider — for numeric, isolated, non-critical inputs
* (MD run length, search hit count, bootstrap cutoff, etc.).
*/
interface ClaySliderProps {
label?: string;
value: number;
min: number;
max: number;
step?: number;
unit?: string;
onChange: (value: number) => void;
disabled?: boolean;
className?: string;
}
export function ClaySlider({
label,
value,
min,
max,
step = 1,
unit,
onChange,
disabled,
className = '',
}: ClaySliderProps) {
const pct = ((value - min) / (max - min)) * 100;
return (
<div className={`flex flex-col gap-1.5 ${disabled ? 'opacity-40' : ''} ${className}`}>
<div className="flex items-center justify-between">
{label && <span className="text-sm text-text-primary">{label}</span>}
<span className="font-mono text-xs text-accent-cyan">
{value}
{unit ? ` ${unit}` : ''}
</span>
</div>
<input
type="range"
role="slider"
aria-label={label}
min={min}
max={max}
step={step}
value={value}
disabled={disabled}
onChange={(e) => onChange(Number(e.target.value))}
className="clay-slider w-full"
style={{ '--fill': `${pct}%` } as CSSProperties}
/>
</div>
);
}
|