Как показать метку в круглом слайдере? - PullRequest
Новая
       41

Как показать метку в круглом слайдере?

0 голосов
/ 11 июля 2019

Я пытаюсь показать метку вокруг круглого слайдера, как слайдер диапазона.

Я использовал эту библиотеку - https://roundsliderui.com/demos.html

Показывает слайдер таким образом.

«Текущий слайдер без метки»

enter image description here

Я хочу изменить его, чтобы показать его метку, как показано на рисунке ниже.

«Ожидаемый ползунок с меткой»

enter image description here

Любая альтернатива, поскольку я пытался изменить эту библиотеку, но она не могла произвестиэтикетка.

1 Ответ

1 голос
/ 11 июля 2019

Попробуйте это. Работа для меня 

$(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>
...