5915c62a9a
- Adjusted button styles across various components for consistency and better UX. - Enhanced layout of action controls to utilize whitespace more effectively. - Updated slider styles for a more modern appearance and improved usability. - Refined input fields and labels for better accessibility and readability. - Introduced new app surface styles for a cohesive design across the application. - Added tests for canvas cursor behavior to ensure correct cursor display during operations.
35 lines
911 B
TypeScript
35 lines
911 B
TypeScript
import type { CSSProperties } from "react";
|
|
|
|
export type BottomControlSliderProps = {
|
|
"aria-label": string;
|
|
min: number;
|
|
max: number;
|
|
value: number;
|
|
step?: number;
|
|
disabled?: boolean;
|
|
className?: string;
|
|
onValueChange: (value: number) => void;
|
|
};
|
|
|
|
type SliderStyle = CSSProperties & {
|
|
"--slider-progress": string;
|
|
};
|
|
|
|
export function BottomControlSlider({ min, max, value, step = 1, className = "", onValueChange, ...props }: BottomControlSliderProps) {
|
|
const progress = max === min ? 0 : ((value - min) / (max - min)) * 100;
|
|
|
|
return (
|
|
<input
|
|
{...props}
|
|
type="range"
|
|
min={min}
|
|
max={max}
|
|
step={step}
|
|
value={value}
|
|
className={`bottom-control-slider ${className}`}
|
|
style={{ "--slider-progress": `${Math.max(0, Math.min(100, progress))}%` } as SliderStyle}
|
|
onChange={(event) => onValueChange(Number(event.target.value))}
|
|
/>
|
|
);
|
|
}
|