import React from 'react' ; import Typography from '@material-ui/core/Typography' ; import Slider from '@material-ui/core/Slider' ; import Row from 'react-bootstrap/Row' ; import Col from 'react-bootstrap/Col' ; import { useAppSelector } from '../../state/hooks' ; const SingleSlider = ( props ) => { const darkMode = useAppSelector ( ( state ) => state . darkMode ) ; const marks = ( interval , min , max ) => { const marksArr = [ ] ; if ( min !== interval ) { marksArr . push ( { value : min , label : min . toString ( ) } ) ; } for ( let i = interval ; i <= max ; i += interval ) { marksArr . push ( { value : i , label : i . toString ( ) } ) ; } return marksArr ; } ; function valuetext ( value ) { return `${ value }` ; } return ( < > < Row className = "mt-3" > < Col md = { 3 } > < Typography id = { props . id } > { props . text } < /Typography> < Typography variant = "caption" > { props . extraLabel } < /Typography> < /Col> < Col > < Slider disabled = { props . disabled === undefined ? false : props . disabled } value = { props . value } onChange = { props . onChange } valueLabelDisplay = "auto" aria - labelledby = { props . id } getAriaValueText = { valuetext } valueLabelFormat = { valuetext } id = { props . id } key = { props . id } min = { props . min } max = { props . max } step = { props . step } color = { darkMode ? 'secondary' : 'primary' } marks = { props . marks && marks ( props . marks . interval , props . marks . min , props . marks . max ) } / > < /Col> < /Row> < />); } ; export default SingleSlider ;