Control de perilla con función táctil en JavaScript puro-Jim Knopf

Vista prévia

Descripción

Jim Knopf es una librería JavaScript pura para generar controles de perilla/dial accesibles, táctiles, basados en SVG que se pueden ajustar con el arrastre del ratón, la rueda del ratón, las teclas de flecha y los gestos táctiles.

Funcionamiento

Cargue la versión minificada de la biblioteca Jim Knopf justo antes de la etiqueta del cuerpo de cierre.

<script src="dist/knob.min.js"></script>

Cree una entrada de rango para el control de la perilla. También puede pasar las opciones de configuración mediante el atributo Data-OPTION como se muestra a continuación.

<input class="demo" type="range" min="0" max="100"



 data-width="100"




data-height="100"




data-angleOffset="220"



 data-angleRange="280"
>

Convierta la entrada de rango en un control de perilla básico.

Ui.Demo = function() {

};

Ui.Demo.prototype = Object.create(Ui.prototype);

Ui.Demo.prototype.createElement = function() {

"use strict";

Ui.prototype.createElement.apply(this, arguments);

this.addComponent(new Ui.Pointer({


type: 'Rect',


pointerWidth: 3,


pointerHeight: this.width / 5,


offset: this.width / 2 - this.width / 3.3 - this.width / 10

}));


this.addComponent(new Ui.Scale(this.merge(this.options, {


drawScale: false,


drawDial: true,


radius: this.width/2.6})));


var circle = new Ui.El.Circle(this.width / 3.3, this.width / 2, this.height / 2);

this.el.node.appendChild(circle.node);

this.el.node.setAttribute("class", "Demo");
};

Aplique sus propios estilos CSS al control de la perilla.

.Demo rect { fill: #57C7B6; }

.Demo g polygon { opacity: 1; }

.Demo circle {

fill: #256058;

stroke: #57C7B6;

stroke-width: 2;

filter: url(#dropshadow);
}

.Demo text {

font-size: 10px;

fill: #57C7B6;

font-family: sans-serif;

font-weight: 300;

-webkit-transition: all .1s ease-in-out;
}

.Demo text.active {

font-size: 15px;

-webkit-transition: all .3s ease-in-out;
}

Todos los ajustes predeterminados.

{

max: parseFloat(input.max),

min: parseFloat(input.min),

step: 1,

angleoffset: 0,

anglerange: 360,

labels: labels
}