javascript - React js 和 MUI 中的三 Angular 形 slider

Question

我想使用 React js 和 MUI 创建价格控制，如下图所示，但我面临如何执行此操作的问题。

我尝试在在线平台上寻找库或任何解决方案，但没有找到任何解决方案

Answer 1

开箱即用，MUI 没有与您正在寻找的类似的样式 slider ，但通过一些创意样式和一点数学，您可以扩展范围 MuiSlider接近你想要的。

这是一个快速而肮脏(不完整)的示例，但如果您选择使用 MUI，则应该作为您的起点。

基本上，它是开箱即用的 slider ，但我使用了 CSS clip-path塑造导轨形状 (.MuiSlider-rail) as a triangle (actually polygon)与动态linear-gradient (具有锐利的过渡)以模拟灰色到橙色到灰色的背景效果。我还隐藏了轨道 (.MuiSlider-track)，因为此实现不需要它。

最后，是一些糟糕的数学(如果你愿意的话，我会把它留给你来解决)，根据拇指各自的值重新定位/调整大小。

      <Slider
        getAriaLabel={() => "Price range"}
        value={value}
        onChange={handleChange}
        valueLabelDisplay="auto"
        getAriaValueText={valuetext}
        marks={marks}
        step={50}
        sx={{
          // Style the rail as a triangle
          "& .MuiSlider-rail": {
            height: "20px",
            borderRadius: 0,
            clipPath: "polygon(0% 75%,100% 0%,100% 100%,0% 100%)",
            background: `linear-gradient(90deg, #ccc ${start}%, #F74 ${start}%, #F74 ${end}%, #ccc ${end}%)`,
            opacity: 1
          },
          // Hide the track (not needed)
          "& .MuiSlider-track": {
            display: "none"
          },
          // You can do some of this in the theme, but I added it here for reference
          "& .MuiSlider-thumb": {
            top: "70%",
            backgroundColor: "#F74",
            border: "4px solid #fff",
            boxShadow:
              "0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)",
            "&:before": {
              boxShadow: "none"
            }
          },
          // Re-size/position thumbs individually based on their values
          "& [data-index='0']:not(.MuiSlider-markLabel)": {
            // This `top` math is gross, but I needed to shift the thumbs up based on value -- could be improved
            top: `${70 - start / 5}%`,
            width: `calc(20px + ${0.2 * start}px)`,
            height: `calc(20px + ${0.2 * start}px)`
          },
          "& [data-index='1']:not(.MuiSlider-markLabel)": {
            // This `top` math is gross, but I needed to shift the thumbs up based on value -- could be improved
            top: `${70 - end / 5}%`,
            width: `calc(20px + ${0.2 * end}px)`,
            height: `calc(20px + ${0.2 * end}px)`
          },
          "& .MuiSlider-markLabel": {
            marginTop: "0.75rem",
            color: "#c0c0c0",
            "&.MuiSlider-markLabelActive": {
              color: "#F74"
            }
          },
          "& .MuiSlider-mark": {
            display: "none"
          }
        }}
      />

结果:

工作代码沙箱: https://codesandbox.io/s/rough-wildflower-6qfsfk?file=/demo.tsx:759-2218