roundslider tooltip format example

roundslider tooltip format example

by Soundar Pandian

HTML

<script src="https://cdn.jsdelivr.net/jquery.roundslider/1.3/roundslider.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.roundslider/1.3/roundslider.min.css">
<h2><a target="_blank" href="http://roundsliderui.com/">roundSlider - v1.3</a></h2> <br/>

<div id="slider"></div>

<div id="slider1"></div>

CSS

.rs-range-color {
  background: #f76c39;
}
.rs-path-color {
  background: #e4e7ec;
}
.rs-handle {
  background: #fff;
  border: 2px solid #ccc;
}
.rs-tooltip-text {
  font-weight: bold;
  color: blue;
}

JavaScript

$("#slider").roundSlider({
  sliderType: "min-range",
  handleShape: "round",
  width: "12",
  radius: "60",
  value: 45,
  animation: false,
  showTooltip: true,
  editableTooltip: false,
  handleSize: "+17",
  startAngle: 90,

  tooltipFormat: function (e) {
  	//return "$ " + e.value;
    
    return "<div>Http post</div> <div>test c</div>";
	}
});