如何在圆形滑块中显示标签..？

Question

我尝试在 Round Slider 周围显示标签，例如 Range 滑块。

我用过这个库 - https://roundsliderui.com/demos.html

滑块是这样显示的

"Current Slider without Label"

我想修改它以显示它的标签，如下图所示。

"Expected Slider with Label"

我尝试过的任何替代方法都修改了这个库，但它无法生成标签。

Answer 1

试试这个。为我工作

$(document).ready(function(){
 $.fn.roundSlider.prototype._invertRange = true;

  // this is core functionality to generate the numbers
  $.fn.roundSlider.prototype.defaults.create = function() {
 var o = this.options, tickInterval = 25;
 
 for (var i = o.min; i <= o.max; i += tickInterval) {
   var angle = this._valueToAngle(i);
   var numberTag = this._addSeperator(angle, "rs-custom");
   var number = numberTag.children();
   number.clone().css({
  "width": o.width + this._border(),
  "margin-top": this._border(true) / -2
   });
   number.removeClass().addClass("rs-number").html(i).rsRotate(-angle);
 }
  }
$("#handle1").roundSlider({
 sliderType: "min-range",
 editableTooltip: false,
 radius: 105,
 width: 16,
 value: 75,
 handleShape: "square",
 handleSize: 0,
 circleShape: "pie",
 startAngle: 315,
 min: 0,
 max: 100,
 step: 5,
 tooltipFormat: function (e) {
  var val = e.value, speed;
  if (val < 20) speed = "Slow";
  else if (val < 40) speed = "Normal";
  else if (val < 70) speed = "Speed";
  else speed = "Very Speed";
  return val + " km/h" + "<div>" + speed + "<div>";
 }
 });
  });

#handle1 .rs-handle  {
 background-color: transparent;
 border: 8px solid transparent;
 border-right-color: black;
 margin: -6px 0px 0px 14px !important;
 border-width: 6px 104px 6px 4px;
}
#handle1 .rs-handle:before  {
 display: block;
 content: " ";
 position: absolute;
 height: 22px;
 width: 22px;
 background: black;
 right: -11px;
 bottom: -11px;
 border-radius: 100px;
}
#handle1 .rs-tooltip  {
 top: 75%;
 font-size: 12px;
}
#handle1 .rs-tooltip div  {
 text-align: center;
 background: orange;
 color: white;
 border-radius: 4px;
 padding: 1px 5px 1px;
 
}
#handle1 .rs-range-color  {
 background-color: #DB5959;
}
#handle1 .rs-path-color  {
 background-color: #F0C5C5;
}
span.rs-number {
  position: absolute;
  top: -8px;
  left: -25px;
  font-size: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.3/roundslider.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.3/roundslider.min.js"></script>
<br><br><br><br><br><br>
<div id="handle1"></div>

如何在圆形滑块中显示标签..？

How to Show Label in Round Slider..?

javascript

jquery

slider

range

rounding