Adding specific points to RoundSlider when using steps

Question

Currently using the roundslider plugin (http://roundsliderui.com/). I have split the values into thirds (33) and changed the tooltip to text values.

I'm wanting to add specific graphical points where the steps are, (e.g a circle) to indicate the steps the users drag the slider to. Couldn't find anything in the docs relating to adding this so was just wondering if this is possible, or if someone has implemented this themselves using the plugin.

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

My original idea was to just add circles on to the steps using ::after on the slider div. Was just wondering if there is a more robust way way of implementing this.

Would be greatly appreciated if someone could solve my problem, Thanks. :)

Answer 1

Based on the requirement i made a generic workaround, which will add the dots based on the step value:

DEMO

Check the above demo and update whether this is related to your requirement or not.