ox_lib/web/src/features/dialog/components/slider.tsx

import { Box, Text, Slider, SliderTrack, SliderFilledTrack, SliderThumb, HStack, Tooltip } from '@chakra-ui/react';
import { useEffect, useState } from 'react';
import { ISlider } from '../../../interfaces/dialog';
import Label from './Label';

interface Props {
  row: ISlider;
  index: number;
  handleChange: (value: number, index: number) => void;
}

const SliderField: React.FC<Props> = (props) => {
  useEffect(() => {
    if (props.row.default || props.row.min) props.handleChange(props.row.default || props.row.min!, props.index);
  }, []);

  const [sliderValue, setSliderValue] = useState(props.row.default || props.row.min || 0);

  return (
    <>
      <Box mb={3} key={`slider-${props.index}`}>
        <Label label={props.row.label} description={props.row.description} />
        <Slider
          onChangeEnd={(val: number) => props.handleChange(val, props.index)}
          onChange={(val: number) => setSliderValue(val)}
          defaultValue={props.row.default || props.row.min || 0}
          min={props.row.min}
          max={props.row.max}
          step={props.row.step}
          isDisabled={props.row.disabled}
        >
          <SliderTrack>
            <SliderFilledTrack />
          </SliderTrack>
          <Tooltip hasArrow label={sliderValue} placement="bottom" gutter={10}>
            <SliderThumb />
          </Tooltip>
        </Slider>
        <HStack justifyContent="space-between">
          <Text fontSize="sm">{props.row.min || 0}</Text>
          <Text fontSize="sm">{props.row.max || 100}</Text>
        </HStack>
      </Box>
    </>
  );
};

export default SliderField;