diff --git a/components/SliderTableField/index.scss b/components/SliderTableField/index.scss new file mode 100644 index 00000000..b9ff9160 --- /dev/null +++ b/components/SliderTableField/index.scss @@ -0,0 +1,8 @@ +.SliderField.TableField { + min-height: $unit-4x; + + .Input { + text-align: right; + width: $unit-8x; + } +} diff --git a/components/SliderTableField/index.tsx b/components/SliderTableField/index.tsx new file mode 100644 index 00000000..04605f8c --- /dev/null +++ b/components/SliderTableField/index.tsx @@ -0,0 +1,67 @@ +import { useEffect, useState } from 'react' +import Input from '~components/Input' +import Slider from '~components/Slider' +import TableField from '~components/TableField' + +import './index.scss' + +interface Props { + name: string + label: string + description?: string + value?: number + className?: string + imageAlt?: string + imageClass?: string + imageSrc?: string[] + min: number + max: number + step: number +} + +const SliderTableField = (props: Props) => { + const [value, setValue] = useState(0) + + useEffect(() => { + if (props.value) setValue(props.value) + }, [props.value]) + + function onInputChange(event: React.ChangeEvent) { + setValue(parseInt(event.currentTarget?.value)) + } + + function onValueChange(value: number[]) { + setValue(value[0]) + } + + return ( + + + + + ) +} + +export default SliderTableField