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

Question

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

我已经使用 material ui 制作了滑块并作出反应，但我无法达到我在 gif 中显示的效果。

Here's the css I have for the slider right now:

: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;
  transform: rotate(0deg) translateX(-35%) translateY(5px) !important;
  border-radius: 0% 0% 0% 0% !important ;
}

span [class^="PrivateValueLabel-label"] {
  margin: 9px;
  transform: rotate(0deg) !important;
}

Here is the code I used for the slider

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;

这是一个带有当前滑块的condesandbox，它没有我想要实现的功能：https://codesandbox.io/s/material-demo-forked-fd3m5?file=/app.css

Answer 1

您可以 select 父项的样式值并通过 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;
}

最好是从脚本本身执行此操作，同时将左侧位置分配给创建的元素。

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

How to make the label of a slider translate in the X axis to fit the width of the slider using CSS?

css

slider

reactjs

material-ui