Live Demo

You can see live demo here

Features

multiple sliders inside one container (see demo image above)
min/max value with step size specified
releasing slider handler before reaching the step value will automatically complete the step
value change callback reports current value dynamically based on the slider's position
setting the value by dragging the handler or by tapping the spot on the slider

Usage

Just add a link to the css file in your <head>:

<!-- Add the circular-slider.css styles (load it from lib folder) -->
<link rel="stylesheet" type="text/css" href="https://github.com/MougLee/circular-slider/blob/master/lib/circular-slider.css"/>

Then, before your closing <body> tag add javascript file from the dist folder:

<script type="text/javascript" src="/path/to/dist/circular-slider.min.js"></script>

Package Managers

You still need to import css files

NPM

npm install @mougli/circular-slider

Once you install/add the files the files, you can instantiate the slider:

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;

Settings

function(newValue) {

console.log(newValue);

}
// or as lambda function

const valueChange = newVal => console.log(newVal);

Important! Please note that radius is relative to the container size - 200 is maximum and means 100% of the container. The slider will adjust the to the size of the container automatically. Radius 200 means slider will be touching the boundaries.