roundSlider - CSS conic gradient

roundSlider - CSS conic 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> [CSS conic gradient]</h2>

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

CSS

.rs-svg-container {
  border-radius: 100%;

  /* by default conic gradient was start from 90 deg */
  /* so based on the roundSlider startAngle, modify this value */
  background: conic-gradient(
    from -90deg,
    yellow 0%, yellow 20%, 
    blue 20%, blue 40%, 
    red 40%, red 60%, 
    green 60%, green 80%, 
    brown 80%, brown 100% 
  );
}
.rs-svg-container:after {
  content: " ";
  display: block;
  background: white;
  position: absolute;
  top: 0;
  border-radius: 100%;
  height: calc(100% - 20px);   /* here 20 is the slider's (width * 2) */
  width: calc(100% - 20px);
  transform: translate(10px, 10px);   /* here 10 is the slider's (width) */
}

JavaScript

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