Добавление определенных точек в RoundSlider при использовании шагов

Question

В настоящее время используется плагин Roundslider ( 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>";
}

СКС:

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

Моя оригинальная идея состояла в том, чтобы просто добавить круги на ступеньки, используя ::after на ползунке дел. Было просто интересно, есть ли более надежный способ реализации этого.

Буду очень признателен, если кто-то может решить мою проблему, спасибо.:)

Answer 1

На основе требования я сделал общий обходной путь, который будет добавлять точки на основе значения шага:

DEMO

Проверьте вышеприведенную демонстрацию и обновите, связано ли это с вашим требованием или нет.