Files
misode.github.io/src/app/components/customized/CustomizedSlider.tsx
2024-10-15 05:14:02 +02:00

22 lines
700 B
TypeScript

import { NumberInput, RangeInput } from '../index.js'
import { CustomizedInput } from './CustomizedInput.jsx'
interface Props {
label: string,
help?: string,
value: number,
min: number,
max: number,
step?: number,
initial?: number,
error?: string,
onChange: (value: number) => void,
}
export function CustomizedSlider(props: Props) {
const isInteger = (props.step ?? 1) >= 1
return <CustomizedInput {...props}>
<RangeInput value={props.value} min={props.min} max={props.max} step={props.step ?? 1} onChange={props.onChange} />
<NumberInput value={isInteger ? props.value : props.value.toFixed(3)} step={Math.max(1, props.step ?? 1)} onChange={props.onChange} />
</CustomizedInput>
}