You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 lines
762 B
TypeScript
42 lines
762 B
TypeScript
9 months ago
|
import * as React from "react";
|
||
|
|
import styles from "./input-range.module.scss";
|
||
|
|
import clsx from "clsx";
|
||
|
|
|
||
|
|
interface InputRangeProps {
|
||
|
|
onChange: React.ChangeEventHandler<HTMLInputElement>;
|
||
|
|
title?: string;
|
||
|
|
value: number | string;
|
||
|
|
className?: string;
|
||
|
|
min: string;
|
||
|
|
max: string;
|
||
|
|
step: string;
|
||
|
|
aria: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function InputRange({
|
||
|
|
onChange,
|
||
|
|
title,
|
||
|
|
value,
|
||
|
|
className,
|
||
|
|
min,
|
||
|
|
max,
|
||
|
|
step,
|
||
|
|
aria,
|
||
|
|
}: InputRangeProps) {
|
||
|
|
return (
|
||
|
|
<div className={clsx(styles["input-range"], className)}>
|
||
|
|
{title || value}
|
||
|
|
<input
|
||
|
|
aria-label={aria}
|
||
|
|
type="range"
|
||
|
|
title={title}
|
||
|
|
value={value}
|
||
|
|
min={min}
|
||
|
|
max={max}
|
||
|
|
step={step}
|
||
|
|
onChange={onChange}
|
||
|
|
></input>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|