roundslider with custom tooltip

roundslider with custom tooltip - external tooltip to show any html content

by Soundar Pandian

HTML

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

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

CSS

body {
  background: #fff;
}
#slider {
  margin: 40px 0 0 160px;
}
#slider .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;
	}
	#slider .rs-handle:before  {
		display: block;
		content: " ";
		position: absolute;
		height: 22px;
		width: 22px;
		background: black;
		right: -11px;
		bottom: -11px;
		border-radius: 100px;
	}
	#slider .rs-tooltip  {
		top: 75%;
		font-size: 11px;
	}
	#slider .rs-range-color  {
		background-color: #DB5959;
	}
	#slider .rs-path-color  {
		background-color: #F0C5C5;
	}

	.arrow_box {
		position: relative;
		background: #666666;
		color: #fff;
		border: 2px solid #233834;
		transform: rotate(-90deg);
		left: -145px;
		top: -35px;
		padding: 5px 0;
		text-align: center;
		width: 130px;
		cursor: auto;
	}
	.arrow_box:after, .arrow_box:before {
		top: 100%;
		left: 50%;
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
	}

	.arrow_box:after {
		border-color: rgba(255, 97, 97, 0);
		border-top-color: #666666;
		border-width: 20px;
		margin-left: -20px;
	}
	.arrow_box:before {
		border-color: rgba(35, 56, 52, 0);
		border-top-color: #233834;
		border-width: 23px;
		margin-left: -23px;
	}
  .start, .end {
    width: 50%;
    position: absolute;
    z-index: 100;
    bottom: 30px;
}
.start {
    left: -35px;
}
.end {
    right: -60px;
    text-align: right;
}

JavaScript

window.onSliderCreate = function (e) {
  this._handles().append("<div class='arrow_box'> <div>You saved</div> <b class='box_value'></b> <div>When you sell</div> </div>");
  this.control.append($("<div class='start'>$ "+this.options.min+"</div>"));
  this.control.append($("<div class='end'>$ "+this.options.max+"</div>"));
  updateBox.call(this);
}
window.updateBox = function (e) {
  var profit = Math.round(this.options.value * 0.005);
  this._handles().find(".box_value").html("$ " + profit);
}
window.changeTooltip = function (e) {
  updateBox.call(this);
  return "$ " + e.value + "<div>Home price<div>";
}

$("#slider").roundSlider({
		sliderType: "min-range",
		editableTooltip: false,
		radius: 105,
		width: 16,
		value: 500000,
		handleSize: 0,
		handleShape: "square",
		circleShape: "pie",
		startAngle: 315,
		min: 1000,
		max: 1000000,
		create: "onSliderCreate",
		tooltipFormat: "changeTooltip"
	});