KaisarCode

Control de dial giratorio liviano en JavaScript puro 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/public/demos/kc-rotate-dial/demo.html

Repositorio

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

Características

• Sin dependencias
• 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

2. Incluí el script en tu HTML:

<script src="kc-rotate-dial.js"></script>

3. Agregá el elemento dial en tu HTML:

<div id="myDial" style="width:100px; height:100px; background:#ccc; border-radius:50%;"></div>

4. 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}`);
};

5. Para establecer la rotación programáticamente:

dial.setValue(90);