roundslider - lines on the range where the handles placed in-between the lines and numbers on the path

roundslider - lines on the range where the handles placed in-between the lines and numbers on the path

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>

CSS

.rs-border {
  border: none;
}
.rs-path-color {
  background: #455a64;
}
.rs-bg-color {
  background: #f5f5f5;
}
.rs-tooltip.rs-tooltip-text {
  display: table;
  height: 80%;
  width: 80%;
  top: 10%;
  left: 10%;
  border-radius: 100%;
  box-shadow: 0px 0px 7px 1px #aaa;
  background: white;
  margin: 0 !important;
  z-index: 7;
}
.rs-tooltip.rs-tooltip-text .my-value {
  vertical-align: middle;
  display: table-cell;
}
.my-value .val {
  font-size: 24px;
  font-weight: bold;
}
.other-val {
  font-size: 16px;
  font-weight: bold;
  margin-top: 10px;
}
body {
  background: #f5f5f5 !important;
}

JavaScript

$("#slider").roundSlider({
  circleShape: "pie",
  startAngle: 315,
  lineCap: "round",
  handleSize: "15",
  editableTooltip: false,
  radius: 120,
  width: 2,
  min: 16,
  max: 32,
  step: 1,
  value: 19,
  tooltipFormat: function (e) {
  	var value = e.value;
    var otherValue = 17;
    return ""+
    	"<div class='my-value'>"+
    		"<div class='val'>"+
        	"<span>"+value+"</span>"+
          "<span> &#8451;</span>"+
      	"</div>"+
    		"<div class='other-val'>"+otherValue+"</div>"+
			"</div>";
  }
});