Logo

Documentation v8.2.8

Downloads Preview
Light
Dark
System

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: 
<!--begin::Dialer-->
<div class="input-group w-md-300px" 
    data-kt-dialer="true" 
    data-kt-dialer-currency="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="ki-duotone ki-minus fs-2"></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="ki-duotone ki-plus fs-2"></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: 
<!--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">
        <i class="ki-duotone ki-minus-square fs-2"><span class="path1"></span><span class="path2"></span></i>
    </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">
        <i class="ki-duotone ki-plus-square fs-2"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>
    </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: 
// 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">
        <i class="ki-duotone ki-minus-square fs-2"><span class="path1"></span><span class="path2"></span></i>
    </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">
        <i class="ki-duotone ki-plus-square fs-2"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>
    </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.
currency String 'true' Displays currency formatted input value. E.g: 1,200,450.50$

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...
});
buy metronic buy mega bundle
Preview Get Help Buy Now