JSFiddle - React, Tailwind, and code Playground

by brombomb

HTML

<script src="https://raw.githubusercontent.com/MougLee/circular-slider/master/dist/circular-slider.min.js"></script>
<link rel="stylesheet" href="https://github.com/MougLee/circular-slider/blob/master/lib/circular-slider.css">
Hello
<div id="slider">

</div>

CSS

#sliderRootSVG circle {
    fill: none;
    stroke-width: 10px;
    overflow: visible;
}

#sliderRootSVG circle.handle {
    fill: #fff;
    stroke: #CFCFD0;
    stroke-width: 1px;
}

#sliderRootSVG .dashed-circle {
    stroke: #D0D0D0;
}

#sliderRootSVG .top-slider {
    stroke-opacity: 0.8;
}

#sliderRootSVG .handle.same-step-error {
    stroke: #fd3b3f;
}

JavaScript

const options = {
  container: 'slider',
  color: "#5d3b6d", 
  max: 100, 
  min: 0, 
  step: 1, 
  radius: 190, 
  valueChange: val => console.log("Value changed: " + val)};
  
const slider = new CircularSlider(options);

// read current value
console.log(slider.currentValue);

//set step programmatically
slider.stepNo = 25;