Crear controles tipo «perilla» con JavaScript y SVG

Jim Knopf es el nombre de esta pequeña biblioteca para la creación de controles circulares utilizando imágenes SVG.

Los controles creados funcionan perfectamente en los navegadores más modernos, especialmente probado en: Chrome, Firefox, Opera, Safari y Safari móvil.

Otro detalle importante es que Jim Knopf detecta perfectamente los eventos del teclado (← ↑ → ↓ ), la rueda del mouse y hasta el touchpad en dispositivos táctiles.

biblioteca javascript para manipular archivos svg

Una de las principales características de utilizar archivos SVG es que los mismos se pueden escalar sin perder calidad, una gran ventaja de cara al diseño de herramientas del tipo adaptables.

La configuración de los controles es muy sencilla y se basa en el uso de parámetros específicos, por ejemplo podemos definir los siguientes que sirven para la gran mayoría de los controles del tipo perilla.

min="0"
max="10"
data-angleOffset="270
data-angleRange="180"
step="2"

Visiten el ejemplo online para ver en funcionamiento estos fantásticos controles.

Web: Jim Knopf

Categorizado en: