javascript - 如何在圆形 slider 中显示标签..？

Question

我尝试在圆形 slider 周围显示标签，例如范围 slider 。

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

它以这种方式显示 slider 。

“没有标签的当前 slider ”

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

“预期带有标签的 slider ”

任何替代方案，因为我尝试修改此库，但它无法生成标签。

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>