开箱即用，MUI没有一个类似于你正在寻找的样式的滑块，但通过一些创造性的样式和一点点数学，你可以扩展Ranged MuiSlider来接近你想要的。
这是一个***快速而肮脏的（不完整的）示例***，但应该作为你的起点，如果你选择使用MUI。
基本上，它是开箱即用的滑块，但我使用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