File size: 1,328 Bytes
763be49 |
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 |
import React from 'react';
interface ZoomSliderProps {
zoomLevel: number;
onZoomChange: (newZoomLevel: number) => void;
}
const ZoomSlider: React.FC<ZoomSliderProps> = ({ zoomLevel, onZoomChange }) => {
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
onZoomChange(parseFloat(event.target.value));
};
const zoomPercentage = Math.round(zoomLevel * 100);
return (
<div
className="fixed bottom-4 left-1/2 -translate-x-1/2 z-30 bg-slate-700 bg-opacity-80 backdrop-blur-sm text-white p-3 rounded-lg shadow-xl flex items-center space-x-3"
role="toolbar"
aria-label="Zoom controls"
>
<label htmlFor="zoom-slider" className="text-xs font-medium whitespace-nowrap">
Zoom: <span className="font-bold">{zoomPercentage}%</span>
</label>
<input
type="range"
id="zoom-slider"
min="0.2" // 20%
max="3.0" // 300%
step="0.01"
value={zoomLevel}
onChange={handleChange}
className="w-32 md:w-40 h-2 bg-slate-500 rounded-lg appearance-none cursor-pointer accent-sky-500"
aria-valuemin={20}
aria-valuemax={300}
aria-valuenow={zoomPercentage}
aria-label={`Current zoom level ${zoomPercentage} percent`}
/>
</div>
);
};
export default ZoomSlider;
|