反应多拇指输入滑块

如何解决反应多拇指输入滑块

我正在尝试使用 Material UI react 输入滑块示例创建一个多拇指滑块。

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import Slider from '@material-ui/core/Slider';
import Input from '@material-ui/core/Input';


    const useStyles = makeStyles({
      root: {
        width: 250,},input: {
        width: 42,});
    
    export default function InputSlider() {
      const classes = useStyles();
      const [value,setValue] = React.useState(30);
    
      const handleSliderChange = (event,newValue) => {
        setValue(newValue);
      };
    
      const handleInputChange = (event) => {
        setValue(event.target.value === '' ? '' : Number(event.target.value));
      };
    
      const handleBlur = () => {
        if (value < 0) {
          setValue(0);
        } else if (value > 100) {
          setValue(100);
        }
      };
    
      return (
        <div className={classes.root}>
          <Typography id="input-slider" gutterBottom>
            Volume
          </Typography>
          <Grid container spacing={2} alignItems="center">
            <Grid item>
              
            </Grid>
            <Grid item xs>
              <Slider
                value={typeof value === 'number' ? value : 0}
                onChange={handleSliderChange}
                aria-labelledby="input-slider"
              />
            </Grid>
            <Grid item>
              <Input
                className={classes.input}
                value={value}
                margin="dense"
                onChange={handleInputChange}
                onBlur={handleBlur}
                inputProps={{
                  step: 10,min: 0,max: 100,type: 'number','aria-labelledby': 'input-slider',}}
              />
            </Grid>
          </Grid>
        </div>
      );
    }

我想在同一轨道/轨道上有三个单独的拇指和三个单独的输入框。我不想有范围滑块。 像这样的东西。

我尝试自定义 makeStyles()。但是，它似乎不起作用。关于如何实施的任何建议。

材料界面链接：https://material-ui.com/components/slider/#InputSlider.js

我也尝试过使用 getMuiTheme，但没有成功。