如何使用CSS使滑块的标签在X轴上平移以适应滑块的宽度？

我希望滑块的标签在X轴上平移，以适合我在中演示的滑块的当前宽度。很难用文字来解释我想要什么，所以请看gif来理解我想要实现什么

我已经用material ui和react制作了滑块，但我无法达到gif中显示的效果

以下是我现在为滑块提供的css：

下面是我用于滑块的代码

import React，{useffect，useState}来自“React”；
从“@material ui/core/Slider”导入滑块；
导入“/app.css”；
常量文本滑块=（道具）=>{
const[value，setValue]=useState（-1）；
常量[marks，setMarks]=useState（[]）；
常量handleChange=（事件，newValue）=>{
如果（新值！==值）{
设置值（新值）；
}
};
useffect（（）=>{
设定值([
“2020年第一季度”，
“2020年第二季度”，
“2020年三季度”，
“2020年第四季度”，
“2021年三季度1”
]);
设定值（0）；
}, []);
如果（值==-1）{
返回；
}
返回(
{
返回标记[值]；
}}
valueLabelFormat={（值，索引）=>{
返回标记[值]；
}}
aria labelledby=“离散滑块自定义”
步骤={1}
min={0}
max={4}
valueLabelDisplay=“on”
onChange={handleChange}
磁道={false}
标记={true}
/>
);
};
导出默认文本滑块；

---

这里有一个带有当前滑块的沙盒，它没有我想要实现的功能：

您可以选择父对象的样式值，并通过CSS重置translatex（）值

仅通过CSS的示例：

:root {
  --slider-width: 60%;
}

.slider-container {
  margin: auto;
  position: absolute;
  left: 20%;

  bottom: 50vh;
  width: var(--slider-width);
  z-index: 999;
  padding: 10px;
}

span [class^="PrivateValueLabel-circle"] {
  width: max-content !important;
  height: fit-content !important;
  transform: rotate(0deg) translateX(-35%) translateY(5px);
  border-radius: 0% 0% 0% 0% !important ;
}

span [class^="PrivateValueLabel-label"] {
  margin: 9px;
  transform: rotate(0deg) !important;
}
.MuiSlider-thumb[style="left: 0%;"] span.MuiSlider-valueLabel {
  transform: translate(45%, -35%);
}
.MuiSlider-thumb[style="left: 25%;"] span.MuiSlider-valueLabel {
  transform: translate(20%, -35%);
}
.MuiSlider-thumb[style="left: 75%;"] span.MuiSlider-valueLabel {
  transform: translate(-20%, -35%);
}

.MuiSlider-thumb[style="left: 100%;"] span.MuiSlider-valueLabel {
  transform: translate(-45%, -35%);
}
.MuiSlider-thumb[style] span.MuiSlider-valueLabel {
  transition: 0s;
}

---

最好是从脚本本身开始，同时将左位置指定给创建的元素。

这就是您的意思吗？您应该添加一些代码来演示您的问题：（如果有人否决了我的问题，请告诉我原因是什么，以便我可以改进它。@G-Cyrillus这就是我真正想要实现的目标。我认为gif很清楚我发布了我想要的内容。此外，我用我现有的代码添加了codesandbox。如果你想发布带有你制作的codesandbox的答案，我将按如下方式进行检查。）回答正确。非常感谢。我想这是因为你的问题是由链接组成的，而你在这里没有提供任何代码。react不是那么容易，但你尝试从其中构建一个片段，其中包含所需的库：如果你对组件和CSS的代码进行pst，它会帮助你了解问题所在，链接可能会死掉快速点击，然后Q/A对其他有同样问题的人来说就没用了。

const textsslider…

+css会提供一个很好的视图。大多数时候我都不关注链接。我是这样做的，因为我想尝试做一些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) => {
    if (newValue !== value) {
      setValue(newValue);
    }
  };

  useEffect(() => {
    setMarks([
      "2020 trimestre 1",
      "2020 trimestre 2",
      "2020 trimestre 3",
      "2020 trimestre 4",
      "2021 trimestre 1"
    ]);
    setValue(0);
  }, []);

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

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

export default TextSlider;

:root {
  --slider-width: 60%;
}

.slider-container {
  margin: auto;
  position: absolute;
  left: 20%;

  bottom: 50vh;
  width: var(--slider-width);
  z-index: 999;
  padding: 10px;
}

span [class^="PrivateValueLabel-circle"] {
  width: max-content !important;
  height: fit-content !important;
  transform: rotate(0deg) translateX(-35%) translateY(5px);
  border-radius: 0% 0% 0% 0% !important ;
}

span [class^="PrivateValueLabel-label"] {
  margin: 9px;
  transform: rotate(0deg) !important;
}
.MuiSlider-thumb[style="left: 0%;"] span.MuiSlider-valueLabel {
  transform: translate(45%, -35%);
}
.MuiSlider-thumb[style="left: 25%;"] span.MuiSlider-valueLabel {
  transform: translate(20%, -35%);
}
.MuiSlider-thumb[style="left: 75%;"] span.MuiSlider-valueLabel {
  transform: translate(-20%, -35%);
}

.MuiSlider-thumb[style="left: 100%;"] span.MuiSlider-valueLabel {
  transform: translate(-45%, -35%);
}
.MuiSlider-thumb[style] span.MuiSlider-valueLabel {
  transition: 0s;
}