Control de rango de estilo de medidor con SVG y Vanilla JavaScript-Audials

Vista prévia

Descripción

Audials es un plugin de JavaScript vainilla que visualiza cualquier valor en el gráfico de marcación táctil, personalizable, con forma vectorial y de calibre. Una gran alternativa a la entrada de rango por defecto.

Funcionamiento

Descargue los Audials y luego incluya el TK-Audials. min. CSS & TK-Audials. min. js en la Página Web.

<script src="build/tk-audials.min.js"></script>
<link rel="stylesheet" href="build/tk-audials.min.css">

Agregue la clase CSS ' TK-audial ' a un elemento contenedor.

<div id="demo" class="tk-audial"></div>

Dibuje un control de rango circular dentro del contenedor que acaba de crear.

var demo = document.querySelector('#demo');
var demoDial = new TkAudial(demo, {// options here});

Todas las opciones disponibles.

// 'gain' or 'balance'.
 type: 'gain',

// 'notch' or 'fill'
display: 'notch',

// (Number) Range start
min: 0,

// (Number) Range end.
 max: 100,

// (Number) Legal interval. 0.01..n (values are rounded to two decimal places)
step: 1,

// (Number) A global modifier unique to the individual control.
 // Intended to make dials with very large or very small ranges more user friendly.
 sensitivityMultiplier: 1,

// (Boolean) If false the sensitivityMultiplier will only be applied if the user has activated a key or touch modifier.
 alwaysMultiply: true,

// (Number) Initial value.
value: 50,

// (String) Style value (EG white, #, rgb, rgba).
borderColour: null,

// (Number)
borderWidth: 8,

// (String) Style value (EG white, #, rgb, rgba).
indicatorBackgroundColour: null,

// (String) Style value (EG white, #, rgb, rgba).
 indicatorColour: null,

// (Number)
indicatorWidth: 15,

// (String) Style value (EG white, #, rgb, rgba).
 valueBackgroundColour:
null,

// (String) Style value (EG white, #, rgb, rgba).
 valueColour: null,

// (String) Style value (EG 1.2em, 22px, 12pt, 90%).
 valueFontSize: '1em',

// (String) used for name and id of a hidden form input.
 inputId: null,

// (Boolean) Set touch modifier count to zero when releasing a dial.
zeroModifiers: false,

// (Boolean) Add the control value to the clipboard when releasing a dial.
enableClipboard: false