Material UI Slider - создайте несколько курсоров, чтобы отразить диапазон значений

Question

Я пытаюсь наложить несколько указателей (указателей) на следующий компонент UI Slider материала.

Я попытался обновить значения, перечисленные в состоянии, чтобы они представляли собой массив значений, и протестировал свойство большого пальца.

Мне бы хотелось, чтобы у ползунка были значки на обоих концах панели, чтобы при перетаскивании указателей он мог отражать диапазон значений. Компонент в настоящее время перечислен в разделе "лаборатории" материала пользовательского интерфейса.

    import React from 'react';
    import PropTypes from 'prop-types';
    import { withStyles } from '@material-ui/core/styles';
    import Typography from '@material-ui/core/Typography';
    import Slider from '@material-ui/lab/Slider';


    const styles = {
      root: {
        width: 300,
      },
      slider: {
        padding: '22px 0px',
      },
    };

    class SimpleSlider extends React.Component {
      state = {
        value: 50,
      };

    handleChange = (event, value) => {
    this.setState({value});
    console.log(event)
    }


      render() {
        const { classes } = this.props;
        const { value } = this.state;
        return (
          <div className={classes.root}>
            <Typography id="label">{value}</Typography>
            <Slider
              classes={{ container: classes.slider }}
              value={value}
              aria-labelledby="label"
              onChange={this.handleChange}
            />
          </div>
        );
      }
    }

    SimpleSlider.propTypes = {
      classes: PropTypes.object.isRequired,
    };

    export default withStyles(styles)(SimpleSlider);