如何用CSS实现Material UI滑块标签沿X轴平移适配滑块宽度

我明白你想要让滑块的数值标签像GIF演示的那样，随着滑块的位置沿X轴平移，完美适配当前的滑块宽度。咱们来调整你的代码实现这个效果：

1. 修改CSS样式 #

核心问题在于你之前固定了translateX(-35%)，这无法适配不同长度的标签文本。我们需要让标签基于自身宽度动态对齐滑块的thumb：

:root { --slider-width: 60%; }
.slider-container { 
  margin: auto; 
  position: absolute; 
  left: 200px; 
  bottom: 50vh; 
  width: var(--slider-width); 
  z-index: 999; 
  padding: 10px; 
}
/* 调整数值标签容器的样式 */
span[class^="PrivateValueLabel-circle"] {
  width: max-content !important;
  height: fit-content !important;
  /* 关键：用-50%让标签基于自身中心对齐滑块thumb */
  transform: rotate(0deg) translateX(-50%) translateY(5px) !important;
  border-radius: 0 !important;
  padding: 0 8px; /* 增加左右内边距让文本更舒适 */
}
span[class^="PrivateValueLabel-label"] {
  margin: 8px 0; /* 调整上下边距 */
  transform: rotate(0deg) !important;
}

2. 优化React组件代码 #

另外，我们可以优化组件的初始化逻辑，让代码更简洁：

import React, { useEffect, useState } from "react";
import Slider from "@material-ui/core/Slider";
import "./app.css";

const TextSlider = (props) => {
  const [value, setValue] = useState(-1);
  const [marks, setMarks] = useState([]);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  useEffect(() => {
    // 直接初始化marks和value，不需要多次setState
    const initialMarks = [
      "2020 trimestre 1",
      "2020 trimestre 2",
      "2020 trimestre 3",
      "2020 trimestre 4",
      "2021 trimestre 1"
    ];
    setMarks(initialMarks);
    setValue(0);
  }, []);

  if (value === -1) {
    return <div />;
  }

  return (
    <div className="slider-container">
      <Slider
        aria-label="trimestre-selector"
        value={value}
        color="primary"
        getAriaValueText={(value) => marks[value]}
        valueLabelFormat={(value) => marks[value]}
        aria-labelledby="discrete-slider-custom"
        step={1}
        min={0}
        max={4}
        valueLabelDisplay="on"
        onChange={handleChange}
        track={false}
        marks
      />
    </div>
  );
};

export default TextSlider;

改动说明 #

• CSS部分：将translateX(-35%)改为translateX(-50%)，这样标签会以自身的中心为基准向左平移50%，刚好和滑块的thumb对齐，无论标签文本多长都能正确跟随滑块位置平移。同时增加了内边距让文本显示更美观。
• 组件部分：简化了getAriaValueText和valueLabelFormat的写法，优化了初始化逻辑，减少不必要的状态更新判断。

这样修改后，滑块的标签就会像你想要的那样，随着滑块的移动沿X轴平滑平移，完美适配当前的滑块位置啦！

内容的提问来源于stack exchange，提问作者Angel