34 lines
1013 B
TypeScript
34 lines
1013 B
TypeScript
import { rangeStart, rangeEnd, rangeStep } from "../../consts/infrastructure";
|
||
|
||
interface IInputRangeProps {
|
||
selectedRange: number;
|
||
handleOnChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
||
}
|
||
|
||
const InputRange = ({ handleOnChange, selectedRange }: IInputRangeProps) => {
|
||
return (
|
||
<div className="flex flex-col gap-3 justify-between h-full">
|
||
<div className="flex flex-col gap-1">
|
||
<h3 className="text-[18px]">Дистанция ходьбы:</h3>
|
||
<p className="text-xs">минут / метров</p>
|
||
</div>
|
||
<div className="flex flex-col justify-center items-center w-full">
|
||
<p className="text-[10px] font-medium">
|
||
{selectedRange} / {rangeEnd}
|
||
</p>
|
||
<input
|
||
type="range"
|
||
min={rangeStart}
|
||
max={rangeEnd}
|
||
step={rangeStep}
|
||
className="w-full"
|
||
value={selectedRange}
|
||
onChange={handleOnChange}
|
||
/>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default InputRange;
|