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