Deslizador redondo mínimo con entrada de ángulo de JavaScript vainilla

Vista prévia

Descripción

La entrada de ángulo es una biblioteca de JavaScript de vainilla extremadamente pequeña para renderizar un deslizador redondo de 360 grados como una perilla. También proporciona versiones de ReactJS y AngularJS para sus necesidades especiales.

¿Cómo funciona?

Agregue el archivo JavaScript de la entrada de ángulo a la página HTML.

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

Cree la estructura HTML para el control deslizante.

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

Cree un elemento DIV para generar el valor actual que se actualiza automáticamente una vez que el usuario selecciona un valor.

<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; }

El ejemplo de JavaScript para representar un control deslizante redondo dentro del contenedor que acaba de crear.

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>";
}