roundSlider - SVG linear gradient

roundSlider - SVG linear gradient

by Soundar Pandian

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/roundslider.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/roundslider.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/roundslider.min.js"></script>
<h2><a target="_blank" href="https://roundsliderui.com/">roundSlider - v1.4.1</a></h2>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="0" width="0">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:yellow;stop-opacity:1" />
      <stop offset="20%" style="stop-color:yellow;stop-opacity:1" />
      <stop offset="20%" style="stop-color:blue;stop-opacity:1" />
      <stop offset="40%" style="stop-color:blue;stop-opacity:1" />
      <stop offset="40%" style="stop-color:red;stop-opacity:1" />
      <stop offset="60%" style="stop-color:red;stop-opacity:1" />
      <stop offset="60%" style="stop-color:green;stop-opacity:1" />
      <stop offset="80%" style="stop-color:green;stop-opacity:1" />
      <stop offset="80%" style="stop-color:brown;stop-opacity:1" />
      <stop offset="100%" style="stop-color:brown;stop-opacity:1" />
    </linearGradient>
  </defs>
</svg>

<div class="container">
  <div class="control">
    <div id="shape"></div>
  </div>
</div>

JavaScript

$("#shape").roundSlider({
  radius: 80,
  width: 8,
  min: 0,
  max: 100,
  handleSize: "+16",
  circleShape: "pie",
  handleShape: "dot",
  sliderType: "min-range",
  startAngle: 315,
  value: 64,
  disabled: false,
  svgMode: true,
  rangeColor: "url(#grad1)",
  // pathColor: "url(#grad1)",
  pathColor: "#ccc",
  borderWidth: 0
});