Javascript 范围滑块与标签一起工作不正常

我已经创建了离子范围滑块滑块工作良好，但不是预期的滑块

请看这里的小提琴：

[jsfiddle]: https://jsfiddle.net/rudratosh/7wg1p86e/3/
https://jsfiddle.net/rudratosh/7wg1p86e/3/

我正在尝试建立一些类似于给定的剪切滑块。请点击以下链接：

[ref]: (https://www.jamesallen.com/loose-diamonds/all-diamonds/)
https://www.jamesallen.com/loose-diamonds/all-diamonds/

我不能做的是，当我点击行和文本时，它不能正常滑动。请查看这两个链接。还尝试了多滑块，如努伊滑块和其他，但没有任何效果

---

如果有人可以更改当前的小提琴，或者建议使用其他代码，我们将不胜感激。

只需在小提琴中添加此

CSS

，然后检查

.irs--round .irs-line {
  height: 31px;
  background-color: transparent;
}

.irs--round .irs-line:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #dee4ec;
  z-index: 0;
}

---

只需将此

CSS

添加到您的小提琴中并检查

.irs--round .irs-line {
  height: 31px;
  background-color: transparent;
}

.irs--round .irs-line:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #dee4ec;
  z-index: 0;
}

---

不工作。。。你有问题吗。问题是，每当我点击任何标签时，它应该与相同的示例保持一致，如果我点击公平，它必须处于活动状态，但每当我点击公平的左侧幻灯片或其他标签时，它工作正常，但在点击右侧时，它跳过了下一个标签，这是主要问题。不工作。。。你有问题吗。问题是，每当我点击任何标签时，它应该与相同的示例保持一致，如果我点击公平，它必须处于活动状态，但每当我点击公平的左侧幻灯片或其他标签时，它工作正常，但在点击右侧时，它跳过了下一个标签，这是主要问题。