text: import * as React from 'react';
  import Box from '@material-ui/core/Box';
  import Stack from '@material-ui/core/Stack';
  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 }}>
        <Stack spacing={2} direction="row" sx={{ mb: 1 }} alignItems="center">
          <VolumeDown />
          <Slider aria-label="Volume" value={value} onChange={handleChange} />
          <VolumeUp />
        </Stack>
        <Slider disabled defaultValue={30} aria-label="Disabled slider" />
      </Box>
    );
  }
  