Entrada de perilla con función táctil con JavaScript-perilla de entrada

Vista prévia

Descripción

perilla de entrada es una biblioteca de JavaScript vainilla para renderizar accesible, táctil, altamente personalizable < a href = "https://wikicss.com/tag/knob/" > perilla/dial controla al igual que la entrada de rango.

¿Cómo funciona?

Instale la entrada de perilla con NPM:

# NPM
$ npm install knob-input --save

O descargue el archivo zip e inserte los archivos CSS y JavaScript en el documento.

<link rel="stylesheet" href="dist/knob-input.css">
<script src="dist/knob-input.js"></script>

Cree el código HTML para la entrada del mando.

<div class="knob-input">

<div class="knob-input__visual"></div>
</div>

Inicialice la entrada del mando y listo.

var myContainer = document.querySelector('.knob-input');
var myKnobInput = new KnobInput(myContainer);

Opciones de configuración con valores predeterminados.

var myKnobInput = new KnobInput(myKnobContainer,{




//
The minimum input value.


min: 0,



// The maximum input value.


 max: 1,



// The step amount for value changes.


step: '',



 // The initial value of the input.


initial: .5,





// The amount of resistance to value change on mouse/touch drag events.


dragResistance: 300,



 // The amount of resistance to value change on mouse wheel scroll.


 wheelResistance: 4000,



// Callback that sets minRotation to 0 and maxRotation to 360


// Callback that allows for customization of the visual context by setting properties via this.


 // Note that this.element and this.transformProperty will already have values.


 // Useful for caching DOM references, calculations, etc for use in the updateVisuals callback.


visualContext: null,



// Callback that updates visual element rotation based on minRotation/maxRotation



// Custom callback for updating the input visuals based on changes to the input value.


 // Has access to the visual context via this (e.g. this.element).


updateVisuals: null



});

API methods.

// retrieves current value
var currentValue = myKnobInput;

// sets a new value
myKnobInput.value = 0.5;

// watches for changes
myKnobInput.addEventListener('change', function(evt) {

console.log(evt.target.value);
});

Controladores de eventos.

myKnobInput.addEventListener('change', function(evt) {

console.log('I changed value:', evt.target.value);
});

myKnobInput.addEventListener('focus', function(evt) {

console.log('I now have keyboard focus');
});

myKnobInput.addEventListener('blur', function(evt) {

console.log('I lost keyboard focus');
});

Registro de cambios

10/11/2018

• v0.2.5