Circular Value Slider Control In Pure JavaScript – circularSlider.js

The circularSlider.js JavaScript library helps you render circular, SVG based sliders to adjust values with mouse drag.

How to use it:

Download and insert the circularSlider.js into the document.

<script src="js/circularSlider.js"></script>

Create placeholder elements as these:

<div id="container">
</div>
<div class="price"></div>

Create as many sliders you prefer.

var container = document.getElementById("container");
slider1 = new circularSlider({
  container: container,
  color: "#663A69",
  range: [0, 1000],
  step: 1,
  radius: 250,
  text: "Transportation"
});
slider1.handleInput();
slider2 = new circularSlider({
  container: container,
  color: "#0075B0",
  range: [0, 800],
  step: 1,
  radius: 200,
  text: "Food"
});
slider2.handleInput();
slider3 = new circularSlider({
  container: container,
  color: "#009D33",
  range: [0, 2350],
  step: 1,
  radius: 150,
  text: "Insurance"
});
slider3.handleInput();
slider4 = new circularSlider({
  container: container,
  color: "#FF7D36",
  range: [0, 1567],
  step: 1,
  radius: 100,
  text: "Entertainment"
});
slider4.handleInput();
slider5 = new circularSlider({
  container: container,
  color: "#FF394B",
  range: [0, 500],
  step: 1,
  radius: 50,
  text: "Health care"
});
slider5.handleInput();

The CSS rules for the sliders.

.progress {
  width: 100%;
  height: 100%;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  position: relative;
}
.progress__meter,
.progress__value {
  fill: none;
}
.progress__meter {
  stroke: #e6e6e6;
}
.progress__value {
  stroke: #f77a52;
}
.dial {
  background-color: whitesmoke;
  border-radius: 50%;
  box-shadow: 0 0 3px black;
  cursor: pointer;
  height: 26px;
  margin-left: -13px;
  position: absolute;
  top: -13px;
  width: 26px;
  z-index: 124;
}
input {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: -1;
  opacity: 0;
}