import React, { useState, useCallback, useEffect } from 'react'; import { Slider } from 'antd'; import cornerstoneTools from 'vindr-tools'; const styles = { wrapper: { margin: '20px 0', color: 'var(--default-color)', }, radius: { fontSize: '11px', }, slider: { margin: '0', }, }; const defaultValue = 20; function Index() { const [radius, setRadius] = useState(defaultValue); const module = cornerstoneTools.getModule('segmentation'); const handleChangeValue = useCallback(value => { setRadius(value); module.setters.radius(value); }, []); useEffect(() => { module.setters.radius(defaultValue); }, []); return ( <div style={styles.wrapper}> <i style={styles.radius}>Radius</i> <Slider defaultValue={radius} tooltipVisible onChange={handleChangeValue} style={styles.slider} max={50} /> </div> ); } export default React.memo(Index);