Minimal Round Slider With Vanilla JavaScript – Angle Input

Preview:

Description:

Angle Input is an extremely tiny vanilla JavaScript library for rendering a 360-degree round slider like a knob. Also provides ReactJS and AngularJS versions for your special needs.

Basic usage:

Add the Angle Input’s JavaScript file into the html page.

<script src="angle-input.js"></script>

Create the html structure for the slider.

<div class='plain-angle-input default-input'></div>

Create a DIV element to output the current value that auto updates once the user picks a value.

<p class='plain-angle-outlet'>0deg</p>
The core CSS rules to style the slider.

.default-input {
  position: relative;
  border-radius: 50%;
  height: 50px;
  width: 50px;
  border: 1px solid #ccc;
  margin: 2em auto;
  cursor: pointer;
  outline: none;
}
.default-input:focus {
  border: 1px solid #0af;
  cursor: pointer;
}
.angle-input-pivot {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin-top: -1px;
  height: 2px;
}
.default-input .angle-input-pivot::before {
  content: '';
  position: absolute;
  right: 5px;
  top: 50%;
  width: 10px;
  margin-top: -6px;
  height: 10px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #ccc;
}
.default-input:focus .angle-input-pivot::before {
border: 1px solid #0af; }

The sample JavaScript to render a round slider inside the container you just created.

var input = document.querySelector('.plain-angle-input');
var outlet = document.querySelector('.plain-angle-outlet');
var angle = AngleInput(input);
  
input.oninput = function(e) {
  outlet.innerText = angle()+"deg";
}
input.onchange = function(e) {
  outlet.innerHTML = "<b>"+angle()+"deg</b>";
}