Documentation v8.1.1

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-active-color-primary" 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-active-color-primary" 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:

JAVASCRIPT
HTML

// 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 optionbelow 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
`kt.dialer.change`	This event fires before running the `increase`or the `decrease`method
`kt.dialer.changed`	This event fires after running the `increase`or 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...
});