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="box1" class="box">
  <h6>BTC</h6>
  <div id="btc" class="slider" data-value="50"></div>
</div>

<div id="box2" class="box">
  <h6>DASH</h6>
  <div id="dash" class="slider" data-value="25"></div>
</div>

<div id="box3" class="box">
  <h6>LTC</h6>
  <div id="ltc" class="slider" data-value="25"></div>
</div>

CSS

.box {
    display: inline-block;
    width: 110px;
    border: 1px solid #555;
    height: 180px;
    padding: 3px;
    margin: 3px;
}
.box h6 {
  margin: 5px 0;
  text-align: center;
}
.slider {
  margin: 0 auto;
}

JavaScript

$(".slider").roundSlider({
  sliderType: "min-range",
  startAngle: 90,
  handleSize: "0",
  radius: 50,
  width: 12,
  min: 0,
  max: 100,
  beforeCreate: function (e) {
  	var value = this.control.attr("data-value");
    if(value) this.options.value = value;
  }
}).on("drag change", function (e) {
	var ele = this.id;
  if(ele == "btc") {
  	dash.option("value", e.value / 2);
    ltc.option("value", e.value / 2);
  }
  else if(ele == "dash") {
  	btc.option("value", e.value * 2);
    ltc.option("value", e.value);
  }
  if(ele == "ltc") {
  	btc.option("value", e.value * 2);
  	dash.option("value", e.value);
  }
});