# Documentation v8.0.38

Preview Downloads Purchase

# Overview

Dialer is an exclusive plugin of Metronic that enables user-friendly click based dialing functionality for any text input.

# Usage

Dialer's CSS and Javascript files are bundled in the global style and scripts bundles and are globally included in all pages:

    <link href="assets/css/style.bundle.css" rel="stylesheet" type="text/css"/>
    <script src="assets/js/scripts.bundle.js"></script>

# Initialization

- Dialer does not come with its own custom CSS and it uses global input controls and related elements.
- Dialer instances are automatically initialized through `data-kt-dialer="true"`HTML attribute on document ready event.
- Dialer instances can be created programmatically without using the above HTML attribute. See below for more info.

# Basic

Basic example of Dialer based on Input Group:
Input Dialer Examples:

    <!--begin::Dialer-->
    <div class="input-group w-md-300px"
        data-kt-dialer="true"
        data-kt-dialer-min="1000"
        data-kt-dialer-max="50000"
        data-kt-dialer-step="1000"
        data-kt-dialer-prefix="$">

        <!--begin::Decrease control-->
        <button class="btn btn-icon btn-outline btn-outline-secondary" type="button" data-kt-dialer-control="decrease">
            <i class="bi bi-dash fs-1"></i>
        </button>
        <!--end::Decrease control-->

        <!--begin::Input control-->
        <input type="text" class="form-control" readonly placeholder="Amount" value="$10000" data-kt-dialer-control="input"/>
        <!--end::Input control-->

        <!--begin::Increase control-->
        <button class="btn btn-icon btn-outline btn-outline-secondary" type="button" data-kt-dialer-control="increase">
            <i class="bi bi-plus fs-1"></i>
        </button>
        <!--end::Increase control-->
    </div>
    <!--end::Dialer-->

# Custom

The Look and feel can be easily customized by using any input, button or icon variations:
Input Dialer Examples:

    <!--begin::Dialer-->
    <div class="position-relative w-md-300px"
        data-kt-dialer="true"
        data-kt-dialer-min="1000"
        data-kt-dialer-max="50000"
        data-kt-dialer-step="1000"
        data-kt-dialer-prefix="$"
        data-kt-dialer-decimals="2">

        <!--begin::Decrease control-->
        <button type="button" class="btn btn-icon btn-active-color-gray-700 position-absolute translate-middle-y top-50 start-0" data-kt-dialer-control="decrease">
            <span class="svg-icon svg-icon-1"><svg></svg></span>
        </button>
        <!--end::Decrease control-->

        <!--begin::Input control-->
        <input type="text" class="form-control form-control-solid border-0 ps-12" data-kt-dialer-control="input" placeholder="Amount" name="manageBudget" readonly value="$36,000.00" />
        <!--end::Input control-->

        <!--begin::Increase control-->
        <button type="button" class="btn btn-icon btn-active-color-gray-700 position-absolute translate-middle-y top-50 end-0" data-kt-dialer-control="increase">
            <span class="svg-icon svg-icon-1"><svg></svg></span>
        </button>
        <!--end::Increase control-->
    </div>
    <!--end::Dialer-->

While customizing the look and feel, ensure to maintain the control attributes( `data-kt-dialer-control="*"`) in order Dialer to function as expected.

# Javascript

An example of Dialer initialized in Javascript:
Input Dialer Example:

    // Dialer container element
    var dialerElement = document.querySelector("#kt_dialer_example_1");

    // Create dialer object and initialize a new instance
    var dialerObject = new KTDialer(dialerElement, {
        min: 1000,
        max: 50000,
        step: 1000,
        prefix: "$",
        decimals: 2
    });

    <!--begin::Dialer-->
    <div class="position-relative w-md-300px" id="kt_dialer_example_1">
        <!--begin::Decrease control-->
        <button type="button" class="btn btn-icon btn-active-color-gray-700 position-absolute translate-middle-y top-50 start-0" data-kt-dialer-control="decrease">
            <span class="svg-icon svg-icon-1"><svg></svg></span>
        </button>
        <!--end::Decrease control-->

        <!--begin::Input control-->
        <input type="text" class="form-control form-control-solid border-0 ps-12" data-kt-dialer-control="input" name="manageBudget" readonly value="$36,000.00" />
        <!--end::Input control-->

        <!--begin::Increase control-->
        <button type="button" class="btn btn-icon btn-active-color-gray-700 position-absolute translate-middle-y top-50 end-0" data-kt-dialer-control="increase">
            <span class="svg-icon svg-icon-1"><svg></svg></span>
        </button>
        <!--end::Increase control-->
    </div>
    <!--end::Dialer-->

# Options

All options can be passed via HTML attributes `data-kt-dialer-{option}`as well the `option`below that represents the Javascript options object key:

Name | Type | Default | Description
--- | --- | --- | ---
`min` | Number | null | Seta a minimum value of the input.
`max` | Number | null | Sets a maximum value of the input.
`step` | Number | 1 | Sets a step value for dialing.
`decimals` | Integer | 0 | Sets a decimals number for float value formating.
`prefix` | String | ' ' | Displays the formatted input value with a prefix string.
`suffix` | String | ' ' | Displays the formatted input value with a suffix string.

# Methods

The following are the Dialer's functionality methods for more control.

Name | Description
--- | ---
Static Methods
`createInstances(DOMString selector)` | Initializes Bootstrap Dialer instances by selector. Default value of `selector`is `[data-kt-dialer="true"]`. This method can be used to initialize dynamicly populated Bootstrap Dialer instances(e.g: after Ajax request).
    KTDialer.createInstances();
`getInstance(DOMElement element)` | Get the Dialer instance created
    var dialerElement = document.querySelector("#kt_dialer_example_1");
    var dialerObject = KTDialer.getInstance(dialerElement);
Public Methods
`KTDialer(DOMElement element, Object options)` | Constructs a new instance of `KTDialer`class and initializes a Dialer control:
    var dialerElement = document.querySelector("#kt_dialer_control");
    var dialerObject = new KTDialer(dialerElement, options);
Remove `data-kt-dialer="true"`attribute to avoid lazy initializes. For `options`object refer to above Options Reference section.
`increase()` | Increases the input value with the configured step value.
    dialerObject.increase();
`decrease()` | Decreases the input value with the configured step value.
    dialerObject.decrease();
`setValue(Number value)` | Sets a new value.
    dialerObject.setValue(50);
`getValue()` | Gets current value.
    var value = dialerObject.getValue();
`setMinValue(Number value)` | Sets a new `min`value.
    dialerObject.setMinValue(50);
`setMaxValue(Number value)` | Sets a new `max`value.
    dialerObject.setMaxValue(5.5);
`update()` | Updates current value with `min`and `max`values validation.
    dialerObject.update();
`getElement()` | Returns the Dialer's attached DOM element.
    var element = dialerObject.getElement();
`destroy()` | Removes the component instance from element.
    dialerObject.destroy();

# Events

Below are few events for hooking into the Dialer functionality.

Event Type | Description
--- | ---
`kt.dialer.increase` | This event fires before running the `increase`method
`kt.dialer.increased` | This event fires after running the `increase`method
`kt.dialer.decrease` | This event fires before running the `decrease`method
`kt.dialer.decreased` | This event fires before after the `decrease`method

    var dialerElement = document.querySelector("#kt_dialer_example_1");
    var dialerObject = new KTDialer(dialerElement, { /* options */ });
    dialerObject.on('kt.dialer.increase', function(){
        // do something...
    });

### Explore

### Metronic Licenses

License FAQs
Regular License
For single end product used by you or one client
$ 39
Extended License
For single SaaS app with paying users
$ 969
Custom License
Reach us for custom license offers.
Contact Us
Buy Now

### Metronic Demos

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9
Demo 10
Demo 11
Demo 12
Demo 13
Demo 14
Demo 15
Demo 16
Demo 17
Demo 18
Demo 19
Demo 20
Demo 21
Demo 22
Coming soon
Coming soon

##### Learn & Get Inspired

## Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
Documentation & Videos
From guides and video tutorials, to live demos and code examples to get started.
Plugins & Components
Check out our 300+ in-house components and customized 3rd-party plugins.
Layout Builder
Build your layout, preview it and export the HTML for server side integration.
Metronic Downloads
Download your prefered framework and demo with one click.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now