Create Interactive Round Sliders With jQuery - EasyRoundSlider.js

An easy yet customizable jQuery range slider plugin for creating intuitive, interactive, circular slider controls on the web.

Users can interact with the slider controls by sliding the handle around a ring. Ideal for Music & Video Players, Thermostat Controls, Data Visualization Dashboards, Gaming Interfaces, and more.

Inspired by the intricacies of a solar system, you can stack multiple sliders. This parent-child relationship ensures that the position of the child slider is influenced by its parent, leading to dynamic, interconnected interactions.

See Also:

• jQuery Circular Range Slider Plugin - roundSlider
• 10 Best Range Slider Plugins In JavaScript

How to use it:

1. Download the plugin and load the round-slider.min.js script after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/round-slider.min.js"></script>

2. Create a container to hold the round slider.

<div id="example"></div>

3. Initialize the plugin and config the round slider with the following parameters:

InitializeRoundSlider({
  "id": "example",
  "radius": 0,
  "borderWidth": 0,
  "borderColor": "#000000",
  "handleSize": 0,
  "handleColor": "#000000"
});

4. Initialize the plugin and config the round slider with the following parameters:

InitializeRoundSlider({
  "id": "example",
  "radius": 0,
  "borderWidth": 0,
  "borderColor": "#000000",
  "handleSize": 0,
  "handleColor": "#000000"
});

5. This example shows how to create Parent-child sliders, where the child slider's position depends on the parent slider.

<div id="round-slider-parent" class="round-slider"></div>

// Parent-child parent
InitializeRoundSlider({
  "id": "round-slider-parent",
  "radius": 100,
  "borderWidth": 2,
  "borderColor": "#000000",
  "handleSize": 30,
  "handleColor": "#5bc0de"
});

// Adding child
$("#round-slider-parent > #result-handle").append('<div id="round-slider-child"></div>');
$("#round-slider-parent > #result-handle").css("overflow", "visible");

// Parent-child child
InitializeRoundSlider({
  "id": "round-slider-child",
  "radius": 50,
  "borderWidth": 1,
  "borderColor": "#000000",
  "handleSize": 15,
  "handleColor": "#d9534f",
});

$("#round-slider-child").css("position", "absolute");
$("#round-slider-child").css({
  "transform" : "translate(-50%,-50%)",
  "-ms-transform" : "translate(-50%,-50%)",
  "-webkit-transform" : "translate(-50%,-50%)",
  "-moz-transform" : "translate(-50%,-50%)",
  "-o-transform" : "translate(-50%,-50%)"
});
$("#round-slider-child").css("top", "50%");
$("#round-slider-child").css("left", "50%");

6. Get the value when the round slider changes.

function roundSliderOnValueChanged(target, value) {
  if (target.attr("id") === "example") {
    $("#YOUR-OUTPUT-ELEMENT").text(value);
  }
}

7. Update the round slider programmatically.

updateRoundSliderValue("#example", 0.5);

---

This awesome jQuery plugin is developed by daifukufuku. For more Advanced Usages, please check the demo page or visit the official website.