roundSlider - user requirement

roundSlider - rotate on both sides

by Soundar Pandian

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/round-slider@1.6.1/dist/roundslider.min.css">
<script src="https://cdn.jsdelivr.net/npm/round-slider@1.6.1/dist/roundslider.min.js"></script>
<h2><a target="_blank" href="https://roundsliderui.com/">roundSlider - v1.6.1</a></h2>

<div id="slider1"></div>

CSS

.rs-handle {
  border: 1px solid #5a5953;
  background-color: #64a5dc;
}

.rs-tooltip-text {
  font-size: 60px;
}

JavaScript

$("#slider1").roundSlider({
  lineCap: "round",
  width: 14,
  radius: 90,
  handleSize: "+30",
  editableTooltip: false,
  svgMode: true,
  sliderType: "min-range",

  startAngle: 105,
  endAngle: 75,
  step: 5,

  startValue: 50,

  pathColor: "#fbf4e3",
  borderColor: "#5a5953",

  valueChange: function (e) {
    var color = e.isInvertedRange ? "#f8bab5" : "#4ba694";

    $("#slider1").roundSlider({ "rangeColor": color });
    $("#slider1 .rs-handle").css("background-color", e.value == 50 ? "" : color);
  },

  tooltipFormat: function (e) {
    var value = e.value
    if (value == 50) return "😐";
    else if (value < 50) return "🙁";
    else if (value > 50) return "🙂";
  }
});