Files
misode.github.io/src/app/components/customized/CustomizedSlider.tsx
2023-06-20 04:18:40 +02:00

24 lines
777 B
TypeScript

import type { NodeChildren } from '@mcschema/core'
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,
children?: NodeChildren,
}
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>
}