Question

我正在尝试在以下主要的UI Slider组件上放置多个指针（拇指）。

我尝试将state中列出的值更新为值数组并测试thumb属性。

我希望滑块在条形图的两端都有图标，以便拖动指针时它可以反映一定范围的值。该组件当前在材料ui的“实验室”部分中列出。

    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);

Answer 1

对于将来的读者来说，现在可以通过将数组传递给defaultValue prop来使用此功能：

<Slider
  track="inverted"
  aria-labelledby="track-inverted-range-slider"
  getAriaValueText={valuetext}
  defaultValue={[20, 37]}
  marks />

https://codesandbox.io/s/o1nxv

材质UI滑块-创建多个光标以反映一系列值

1 个答案: