// Component
import { SingleRangeSlider } from 'neo-react-semantic-ui-range'

// Styles
import 'neo-react-semantic-ui-range/dist/styles.min.css'

const MySingleSlider = (props) => {
    const [value, setValue] = useState<number>(45.5)

    /**
     * Handles changes.
     *
     * @param newValue - New value.
     */
    function handleChange (newValue: number) {
        setValue(newValue)
    }

    return <SingleRangeSlider
        value={value}
        defaultMinValue={0}
        defaultMaxValue={100}
        step={0.5}
        color='blue'
        onChange={handleChange}
    />
}

// Component
import { MultiRangeSlider } from 'neo-react-semantic-ui-range'

// Styles
import 'neo-react-semantic-ui-range/dist/styles.min.css'

const MyMultiRangeSlider = (props) => {
    const [minValue, setMinValue] = useState<number>(30)
      const [maxValue, setMaxValue] = useState<number>(60)

    /**
     * Handles changes.
     *
     * @param newActualMin - New min value.
     * @param newActualMax - New max value.
     */
    function handleChange (newActualMin: number, newActualMax: number) {
        setMinValue(newActualMin)
        setMaxValue(newActualMax)
    }

    return <MultiRangeSlider
        minValue={minValue}
        maxValue={maxValue}
        defaultMinValue={0}
        defaultMaxValue={100}
        margin={1}
        color='green'
        onChange={handleChange}
    />
}