javascript 如何样式输入范围滑块与之前和之后，以达到我的要求

ggazkfy8 于 2023-04-04 发布在 Java

关注(0)|答案(1)|浏览(134)

你好，我有一个要求，使像下面的东西

**注意：**上面的图像是有V种图标，这就是我正在尝试

实际上我使用的是input[type=“range”]
下面的样式不起作用

input[type="range"]::-webkit-slider-thumb::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-color: yellow;
  position: absolute;
  top: 30%;
  left: 30%;
}

以下是我所尝试的
x一个一个一个一个x一个一个二个一个x一个一个三个一个
请帮助我与解决方案提前感谢！

JavaScript

来源：https://stackoverflow.com/questions/75897841/how-to-style-input-range-slider-with-before-and-after-to-achieve-my-requirement

1条答案

按热度按时间

nimxete21#

添加以下CSS到您的代码，在这里我已经使用前伪选择器放置三角形右下方自己的滑块

input[type="range"]+label::before {
    content: "";
    clip-path: polygon(0 0, 50% 100%, 100% 0); // check https://bennettfeely.com/clippy/ to generate shapes
    width: 21px;
    height: 20px;
    background: white;
    display: block;
    position: absolute;
    top: 29px;
    left: -0.5px;
    border-top-right-radius: 2px;
    border-top-left-radius: 2px;
}

更新以下css选择器

input[type="range"]+label {
    background-color: #fff;
    position: absolute;
    top: -35px;
    left: 140px;
    width: 20px;
    height: 30px;
    padding: 5px 0;
    text-align: center;
    border-radius: 4px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    font-size: 10px;
}

更改以下JS行。将10，-10更改为0，0

const left =
    value * (numWidth / max) -
    numLabelWidth / 2 +
    scale(value, min, max, 0, 0);

下面是一个工作片段
一个一个三个一个一个一个一个一个四个一个一个一个一个一个五个一个

赞(0）回复(0）举报 2023-04-04

我来回答

javascript 如何样式输入范围滑块与之前和之后，以达到我的要求

1条答案

相关问题

热门标签

最新问答