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`

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

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

1 个答案:

`DEMO`