import React , { useEffect , useState } from 'react' ; import * as Styled from './SliderControl.styles' ; import { FiChevronRight , FiSun , FiVolume2 } from 'react-icons/fi' ; import { useTypedSelector } from '../../hooks/useTypedSelector' ; import { useActions } from '../../hooks/useActions' ; export interface Props { variant : 'voiceControl' | 'brightnessControl' ; withChevron : boolean ; } function param { enum } variant param { boolean } withChevron returns { JSX . Element } const SliderControl = ( { variant , withChevron } ) : JSX . Element => { const { theme } = useTypedSelector ( ( state ) => state . ui ) ; const { changeScreenBrightness } = useActions ( ) ; const [ rangeValue , setRangeValue ] = useState ( '100' ) ; const handleChange = ( e ) => { setRangeValue ( e . target . value ) ; } ; useEffect ( ( ) => { if ( variant === 'brightnessControl' ) { changeScreenBrightness ( rangeValue ) ; } } , [ rangeValue , variant ] ) ; return ( < Styled . Container > < Styled . Label htmlFor = { variant } > { variant === 'voiceControl' ? ( < FiVolume2 className = { 'icon' } / > ) : ( < FiSun className = { 'icon' } / > ) } < /Styled.Label> < Styled . Input themeMode = { theme } progress = { rangeValue } type = "range" min = { '0' } max = { '100' } value = { rangeValue } name = { variant } onChange = { handleChange } / > { withChevron && < FiChevronRight className = { 'icon' } />} < /Styled.Container>); } ; export default SliderControl ;