import * as React from 'react' ; import styles from './BrightnessSlider.css' ; import Typography from '@material-ui/core/Typography' ; import Slider from '@material-ui/core/Slider' ; import { makeStyles } from '@material-ui/styles' ; const useStyles = makeStyles ( styles ) ; type Props = { brightness : number ; setBrightness : ( brightness : number ) => void ; } ; const BrightnessSlider = ( props ) => { const classes = useStyles ( { } ) ; const { brightness , setBrightness } = props ; const onChange = ( event , value ) => { setBrightness ( value ) ; } ; return ( < div className = { classes . root } > < Typography style = { { color : 'white' } } id = "label" > Brightness < /Typography> < Slider style = { { color : 'white' } } classes = { { root : classes . slider } } value = { brightness } min = { 0 } max = { 1000 } step = { 0.5 } aria - labelledby = "label" onChange = { onChange } / > < /div>); } ; export default BrightnessSlider ;