Circular slider in React Native

Circular slider in React Native

by Soundar Pandian

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/round-slider@1.4.0/dist/roundslider.min.css">
<script src="https://cdn.jsdelivr.net/npm/round-slider@1.4.0/dist/roundslider.min.js"></script>
<h2><a target="_blank" href="http://roundsliderui.com/">roundSlider - v1.4.0</a> [Circular slider in React Native]</h2><br>


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

<br>
<p>
For: https://stackoverflow.com/questions/60525013/creating-a-circular-slider-in-react-native
</p>

CSS

.rs-handle {
  background-color: #057dbc;
}
.rs-tooltip-text {
  font-weight: bold;
}
.t-value {
  color: #057dbc;
  font-size: 44px;
}
.t-label {
  color: #b7b7b7;
  font-size: 18px;
}

.rs-custom .rs-seperator {
  height: 24px;
  width: 24px;
  margin-top: -12px;
  margin-left: 45px;
  background: #e6e6e6;
  border-radius: 1000px;
  border: none;
}

JavaScript

// this is workaround to generate the circles
$.fn.roundSlider.prototype.defaults.create = function() {
  var o = this.options, tickInterval = 1;
  for (var i = o.min; i <= o.max-1; i += tickInterval) {
    var angle = this._valueToAngle(i);
    this._addSeperator(angle, "rs-custom");
  }
}

$("#slider").roundSlider({
  sliderType: "min-range",
  startAngle: 90,
  lineCap: "round",
  radius: 170,
  width: 14,
  handleSize: "46",

  min: 0,
  max: 12,

  svgMode: true,
  rangeColor: "#057dbc",
  pathColor: "#e6e6e6",
  borderWidth: 0,

  tooltipFormat: function(e) {
    return `
			<div class="t-value">${e.value}</div>
			<div class="t-label">Hours</div>
		`;
  }
});