material-ui - Material UI Slider -- 创建多个光标以反映一系列值

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

标签： material-ui

Answer 1

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

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

https://codesandbox.io/s/o1nxv