Ellipse slider

Ellipse shape slider

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>

<div id="ellipse1"></div>

<div id="ellipse2"></div>

CSS

.rs-control .rs-range-color,
.rs-control .rs-path-color,
.rs-control .rs-bg-color {
  background-color: transparent;
}
.rs-control ellipse.path-bg {
  /* mention the path color here */
  stroke: #eee;
}
.rs-control ellipse.range-bg {
  /* mention the range color here */
  stroke: yellowgreen;
}
div.rs-bar {
  right: 50%;
  display: none;
}
.rs-border, .rs-handle {
  border: none;
}

JavaScript

/// ### ---- ### sample level workaround ### ---- ### ///
$.fn.roundSlider.prototype._getEllipseCircumference = function (rx, ry) {
  var h = Math.pow((rx-ry), 2) / Math.pow((rx+ry), 2);
  var totalLength = (Math.PI * ( rx + ry )) * (1 + ( (3 * h) / ( 10 + Math.sqrt( 4 - (3 * h) )) ));
  return totalLength;
}

var fn1 = $.fn.roundSlider.prototype._setProperties;
$.fn.roundSlider.prototype._setProperties = function () {
  fn1.apply(this);
  var o = this.options, rx1 = o.radiusX, ry1 = o.radiusY;
  this.options.radius = (rx1 > ry1) ? rx1 : ry1;
  this._setRadius();

  var r = o.radius, d = r * 2, 

      r1 = r - (o.width / 2) - this._border(true),

      rx = rx1 - (o.width / 2) - this._border(true),
      ry = ry1 - (o.width / 2) - this._border(true),
      svgNS = "http://www.w3.org/2000/svg";

  this._circum = this._getEllipseCircumference (rx, ry);

  var $svg = $(document.createElementNS(svgNS, "svg"));
  $svg.attr({ "height": d, "width": d });

  this.$circle = $(document.createElementNS(svgNS, 'ellipse')).attr({
    "fill": "transparent", "class": "rs-transition", "cx": r, "cy": r, "rx": rx, "ry": ry,
    "stroke-width": o.width, "stroke-dasharray": this._circum
  });
  var $path = this.$circle.clone().addClass("path-bg");
  $svg.append($path, this.$circle.addClass("range-bg"));

  this.$svg_box = $(document.createElement("div")).addClass("rs-transition rs-svg").append($svg).css({
    "height": d, "width": d, "transform-origin": "50% 50%",
    "transform": "rotate(" + (o.startAngle + 180) + "deg)"
  }).appendTo(this.innerContainer);
}

var fn2 = $.fn.roundSlider.prototype._changeSliderValue;
$.fn.roundSlider.prototype._changeSliderValue = function (val, deg) {
  fn2.apply(this, arguments);
  var oAngle = this._oriAngle(deg);
  var h1Angle = this._handle1.angle, h2Angle = this._handle2.angle;
  var flag = (this._active == 1 && oAngle <= this._oriAngle(h2Angle)) ||(this._active == 2 && oAngle >= this._oriAngle(h1Angle));

  deg = deg -...