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

Question

目前使用圆滑插件(http://roundsliderui.com/)。我将这些值拆分为三分之二(33)，并将工具提示更改为文本值。

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

联署材料：

    $("#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

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