34 lines
796 B
TypeScript
34 lines
796 B
TypeScript
import React from "react";
|
|
// import "./slider.css";
|
|
|
|
|
|
export function Slider(props: {
|
|
value: number;
|
|
onChange: (v: number) => void;
|
|
min?: number;
|
|
max?: number;
|
|
step?: number;
|
|
label?: React.ReactNode;
|
|
formatValue?: (v: number) => string;
|
|
}) {
|
|
const { value, onChange, min = 0, max = 100, step = 1, label, formatValue } = props;
|
|
|
|
return (
|
|
<div className="ui-slider">
|
|
<div className="ui-slider__row">
|
|
{label ? <div className="ui-slider__label">{label}</div> : <div />}
|
|
<div className="ui-slider__value">{(formatValue ?? String)(value)}</div>
|
|
</div>
|
|
|
|
<input
|
|
type="range"
|
|
value={value}
|
|
min={min}
|
|
max={max}
|
|
step={step}
|
|
onChange={(e) => onChange(Number(e.target.value))}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|