EasyRoundSlider.js is a javascript library for creating customizable round sliders.

• Easy to use. You just set the dom id and parameters.
• You can manage multiple sliders separately.
• You can also stack multiple sliders as parent and child components.
• You can update the display of the slider from script.

Include EasyRoundSlider.js and its dependencies in your project:

<script src="jquery-3.6.0.min.js"></script>
<script src='round-slider.min.js'></script>


<div id="your-div-id"></div>

InitializeRoundSlider({
    "id": "your-div-id",
    "radius": 100,
    "borderWidth": 1,
    "borderColor": "#000000",
    "handleSize": 30,
    "handleColor": "#337ab7"
});

You can customize your slider using the following options:

Along with the initialization of RoundSlider, you can dynamically update the value of a slider using the updateRoundSliderValue function. This function takes two parameters: the id of the RoundSlider you wish to update, and the value that you wish to set.

updateRoundSliderValue("#your-div-id", 0.25);