Input Numbers With A Rotary Dialer – Rotary Dial

Category: Form , Javascript | October 23, 2019
Author: victorqribeiro
Views Total: 642 views
Official Page: Go to website
Last Update: October 23, 2019
License: MIT

Preview:

Input Numbers With A Rotary Dialer – Rotary Dial

Description:

A fancy JavaScript library that allows the user to input numbers with a traditional rotary phone dial.

Support both drag and touch events.

How to use it:

1. Download and insert the JavaScript file RotaryDial.js in the document.

<script src="js/RotaryDial.js"></script>

2. Create a text field for the number input.

<input type="text">

3. Create a button to clear the number input.

<button>Clear</button>

4. Initialize the library to generate a canvas-based rotary dialer on the screen.

const rd = new RotaryDial();

5. Attach the rotary dialer to the number input.

const input = document.createElement('input');
const rd = new RotaryDial({
      callback: function(value){
        input.value += value;
      }
});

6. Customize the rotary dialer.

const rd = new RotaryDial({
      
      // dial size
      size: 400,

      // disc fill color
      discFillColor: 'transparent',

      // disc stroke color
      discStrokeColor: 'black',

      // circle fill color
      circlesFillColor: 'black',

      // circle stroke color
      circlesStrokeColor: 'transparent',

      // circle highlight color
      circlesHighlightColor: 'red',

      // text color
      textFillColor: 'white',

      // text border color
      textStrokeColor: 'transparent',

      // arrow color
      arrowFillColor: 'black',

      // arrow border color
      arrowStrokeColor: 'transparent'
      
});

You Might Be Interested In:


Leave a Reply