reactjs - Material-UI slider 仅具有离散值？

Question

我想使用 slider 作为选择器而不是一大堆单选按钮。它只是看起来更干净。 我让它工作得很好，但问题是它总是假设我正在某种规模上进行选择。如果我在中间选择一个值，它会突出显示从开始到我的选择点的所有内容。问题是，我的每个值都是单独的，而不是某种递增规模的一部分(即想象一下，如果选择选项是苹果、香蕉、橙子)。

在以下链接中，MUI 的 slider 类似于示例#1。我需要它像示例#4 一样。 http://react-component.github.io/slider/examples/marks.html

这可能吗？或者我只需要使用其他库中的 slider ？

谢谢

Answer 1

下面是如何通过两个关键自定义来执行此操作的示例:

1. 隐藏轨道。代表 slider 的完整条称为“导轨”。轨道的事件/选定部分称为“轨道”。
2. 事件标记的样式与非事件标记相同。 default styling使轨道内的标记变亮，以便它们仍然可见，但如果未显示轨道，则这是不可取的，因为这会使标记更难以看到。

import React from "react";
import { withStyles, makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Slider from "@material-ui/core/Slider";
import Typography from "@material-ui/core/Typography";

const useStyles = makeStyles(theme => ({
  root: {
    width: 300 + 24 * 2,
    padding: 24
  },
  margin: {
    height: theme.spacing(3)
  }
}));

const NoTrackSlider = withStyles({
  track: {
    display: "none"
  },
  markActive: {
    backgroundColor: "currentColor"
  }
})(Slider);

export default function CustomizedSlider() {
  const classes = useStyles();

  return (
    <Paper className={classes.root}>
      <div className={classes.margin} />
      <Typography gutterBottom>No Track</Typography>
      <NoTrackSlider step={10} valueLabelDisplay="on" marks defaultValue={30} />
      <div className={classes.margin} />
    </Paper>
  );
}