text: import * as React from 'react';
  import Box from '@material-ui/core/Box';
  import Grid from '@material-ui/core/Grid';
  import Typography from '@material-ui/core/Typography';
  import Slider from '@material-ui/core/Slider';
  import VolumeDown from '@material-ui/icons/VolumeDown';
  import VolumeUp from '@material-ui/icons/VolumeUp';
  
  export default function ContinuousSlider() {
    const [value, setValue] = React.useState(30);
  
    const handleChange = (event, newValue) => {
      setValue(newValue);
    };
  
    return (
      <Box sx={{ width: 200 }}>
        <Typography id="continuous-slider" gutterBottom>
          Volume
        </Typography>
        <Grid container spacing={2} alignItems="center">
          <Grid item>
            <VolumeDown />
          </Grid>
          <Grid item xs>
            <Slider
              value={value}
              onChange={handleChange}
              aria-labelledby="continuous-slider"
            />
          </Grid>
          <Grid item>
            <VolumeUp />
          </Grid>
        </Grid>
        <Typography id="disabled-slider" gutterBottom>
          Disabled slider
        </Typography>
        <Slider disabled defaultValue={30} aria-labelledby="disabled-slider" />
      </Box>
    );
  }
  