39 lines
857 B
TypeScript
39 lines
857 B
TypeScript
import React from "react";
|
|
import { useRecoilState } from "recoil";
|
|
|
|
import { iconSizeAtom } from "../../state/atoms";
|
|
import "./SizeInput.css";
|
|
|
|
type SizeInputProps = {};
|
|
|
|
const SizeInput: React.FC<SizeInputProps> = () => {
|
|
const [size, setSize] = useRecoilState(iconSizeAtom);
|
|
|
|
const handleSizeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
const {
|
|
target: { value },
|
|
} = event;
|
|
const sizeInput = parseInt(value);
|
|
|
|
if (sizeInput > 0) setSize(sizeInput);
|
|
};
|
|
|
|
return (
|
|
<div className="size-bar">
|
|
<label htmlFor="size-input">{`Size: ${size}px`}</label>
|
|
<input
|
|
id="size-input"
|
|
value={size}
|
|
type="range"
|
|
title={size.toString()}
|
|
min={16}
|
|
max={96}
|
|
onChange={handleSizeChange}
|
|
step={4}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SizeInput;
|