时间戳

首页 > 解决方案 > 如何使用 CSS 使滑块的标签在 X 轴上平移以适合滑块的宽度？

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

问题描述

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

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

这是我现在用于滑块的 css：

: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;
}

这是我用于滑块的代码

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

标签： cssreactjsmaterial-uislider

解决方案

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

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

推荐阅读