使用步骤时向 RoundSlider 添加特定点

Question

当前使用的是 roundslider 插件 (http://roundsliderui.com/)。我已将值分成三份 (33) 并将工具提示更改为文本值。

我想在步骤所在的位置添加特定的图形点（例如圆圈）以指示用户将滑块拖动到的步骤。在文档中找不到与添加此内容相关的任何内容，因此只是想知道这是否可能，或者是否有人使用插件自己实现了此功能。

js:

    $("#slider-text").roundSlider({
        sliderType: "min-range",
        editableTooltip: false,
        width: 10,
        handleSize: 27,
        startAngle: 90,
        radius: 91,
        step: 33,
        max: 99,
        change: "updateBundle",
        tooltipFormat: "changeTextsAndMinsTooltip"
      });

function changeTextsAndMinsTooltip(e) {
  var val = e.value, content;
  if (val < 33) content = 0;
  else if (val < 66) content = "10 or less";
  else if (val < 99) content = "10 to 30";
  else content = "30 or more";

  return "<div>" + content + "<div>";
}

scss:

// Slider Styling
.rs-control {
  .rs-range-color {
    background-color: $green;
  }

  .rs-border {
    border: none;
  }

  .rs-path-color {
    background-color: #E0E0E0;
  }

  .rs-handle {
    background-color: $green;
    -webkit-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.2);
  }

  .rs-handle.rs-move {
    cursor: pointer;
  }

  .rs-tooltip.rs-tooltip-text {
    font-size: 19px;
    font-weight: 500;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
}

我最初的想法是使用滑块 div 上的::after 在步骤上添加圆圈。只是想知道是否有更强大的方法来实现这一点。

如果有人能解决我的问题，将不胜感激， 谢谢。 :)

Answer 1

根据要求，我做了一个通用的解决方法，它将根据步长值添加点：

DEMO

检查上面的演示并更新这是否与您的要求有关。