仅具有谨慎值的 Material-UI 滑块？答案

【问题标题】：Material-UI Slider with discreet values only?仅具有谨慎值的 Material-UI 滑块？
【发布时间】：2019-08-07 22:07:06
【问题描述】：

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

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

有可能吗？还是我只需要使用其他库中的滑块？

谢谢

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

以下是如何使用两个关键自定义项来执行此操作的示例：

隐藏轨道。代表滑块的完整条称为“导轨”。轨道的活动/选定部分称为“轨道”。
样式活动标记与非活动标记相同。 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>
  );
}

【讨论】：

漂亮！我没想到会这么简单。谢谢

【解决方案2】：

我知道这个问题已经得到解答，但我遇到了类似的问题。滑块 API 提供了一种通过将 step 设置为 null 来限制离散标记值的方法。

step={null}

https://material-ui.com/components/slider/#restricted-values

我的数字标尺上增加了 5，但我需要跳过 5。所以我设置了不包括 5 的单独标记，它就像一个魅力。唯一的问题是它在视觉上仍然保持与标记间距的比例。

【讨论】：