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: 130,
  value: 45,
  animation: false,
  showTooltip: true,
  editableTooltip: false,
  handleSize: "+17",
  startAngle: 90,

  tooltipFormat: function (e) {
    return `
    	<div>
      	Put your custom text here
      </div> 
      
      ${e.value}
      
      <br>
      <br>
      
      <div>
      	add at the bottom also
      </div>
      `;
	}
});