Orbital-dial

Welcome to Oribital-dial.

Orbital dial is a jQuery based dial/knob, and tested on following browsers Chrome 23, Opera 12.11, Safari 6.0.2, Firefox 17, IE6+

Example

Usage

1. include the orbital-dial.min.js in your page
2. create a set of containers for the dial background image and then one or more orbiting sliders:

   
   <div id="OrbitalDial" data-height="288" data-width="288">
       <div id="Slider" data-start-angle="300" data-height="49" data-width="49" data-ratio="0.3333"></div>
       <div id="OuterSlider" data-start-angle="300" data-height="49" data-width="49" data-ratio="0.95"></div>
   </div>
           

3. Each slider represents an element that will orbite around the dial as you interact with it.
4. Invoke the dial:

   
   $(document).ready(function () {
       var orbitalDial = new OrbitalDial({outerSelector: '#OuterSlider'
                           , onMoveCallBack: function() { console.log('moving!'); }
                           , onMoveEndCallBack: function() { console.log('Done moving the dial');}
                         });
   });
           

5. customise the images for the dial by updating the CSS
6. you can configure the the dial, by either attaching attributes to the nodes, or by passing in options when you invoke the dial