KaisarCode

kcRotateDial

Control de dial giratorio liviano en JavaScript puro (vanilla) con arrastre suave, inercia, easing y ajuste a pasos.

Descripción

kcRotateDial es un componente de dial rotatorio en JavaScript puro. Permite a los usuarios hacer clic o arrastrar para rotar un elemento de forma suave, soporta inercia para un movimiento natural, animaciones easing para ajustar valores programáticamente, y un sistema opcional de ajuste por pasos.

Este control, creado originalmente alrededor del año 2010, fue pionero en su época e inspiró a otros desarrolladores y proyectos.

Ahora lo he actualizado para los tiempos modernos.

Demo

Mové el dial y fijate como gira:

Demo con mas configuraciones: https://kaisarcode.com/resources/demos/kc-rotate-dial/demo.html

Repositorio

https://github.com/kaisarcode/kc-rotate-dial

Características

  • Sin dependencias (vanilla JS)
  • Rotación suave con soporte para mouse y táctil
  • Momentum basado en inercia tras soltar el arrastre
  • Animación easing opcional para rotación programática
  • Ajuste a pasos discretos
  • Rastrea rotaciones completas más allá de 360 grados
  • Callbacks personalizables para cambios de valor y eventos de paso
  • Diseño modular y liviano

Uso

  1. Cloná o descargá el código fuente:
git clone https://github.com/kaisarcode/kc-rotate-dial.git
  1. Incluí el script en tu HTML:
<script src="kc-rotate-dial.js"></script>
  1. Agregá el elemento dial en tu HTML:
<div id="myDial" style="width:100px; height:100px; background:#ccc; border-radius:50%;"></div>
  1. Inicializá el dial en JavaScript:
const dial = new KcRotateDial(document.getElementById('myDial'), { easing: true, step: 10, inertia: true, inertiaFriction: 0.9 }); dial.onchange = () => { console.log(`Rotation degrees: ${dial.deg.toFixed(2)}`); }; dial.onstep = (stepValue) => { console.log(`Snapped step: ${stepValue}`); };
  1. Para establecer la rotación programáticamente:
dial.setValue(90);