import { InputNumber , Slider , Form } from 'antd' ; import { useEffect , useState } from 'react' ; import { roundDown } from 'components/shared/formItems/formHelpers' ; import { FormItemExt } from '../formItems/formItemExt' ; export default function NumberSlider ( { min , max , step , sliderValue , suffix , onChange , defaultValue , disabled , name , formItemProps , } ) { const [ _value , setValue ] = useState < number > ( ) ; const inputConfig = { min : min ?? 0 , max : max ?? 100 , step : step ?? 0.1 , } ; const decimals = inputConfig . step . toString ( ) . split ( '.' ) [ 1 ] . length ; const updateValue = ( val ? ) => { setValue ( val ) ; if ( onChange ) onChange ( val ) ; } ; useEffect ( ( ) => setValue ( sliderValue ) , [ sliderValue ] ) ; return ( < div style = { { display : 'flex' , alignItems : 'baseline' } } > < Slider { ... inputConfig } tooltipVisible = { false } style = { { flex : 1 , marginRight : 20 } } value = { _value } onChange = { ( val ) => updateValue ( val ) } defaultValue = { defaultValue } disabled = { disabled } / > < Form . Item name = { name } rules = { formItemProps ?. rules ?? [ ] } > < InputNumber { ... inputConfig } value = { _value } disabled = { disabled } formatter = { ( val ? ) => { let _val = val ?. toString ( ) ?? '0' ; if ( _val . includes ( '.' ) && _val . split ( '.' ) [ 1 ] . length > decimals ) { _val = roundDown ( parseFloat ( _val ) , decimals ) . toString ( ) ; } return `${ _val ?? '' }${ suffix ?? '' }` ; } } parser = { ( val ? ) => parseFloat ( val ?. replace ( suffix ?? '' , '' ) ?? '0' ) } onChange = { ( val ) => { const newVal = ( typeof val === 'string' ? parseFloat ( val ) : val ) ?? undefined ; updateValue ( newVal ) ; } } defaultValue = { defaultValue } / > < /Form.Item> < /div>); }