Logo

Documentation v8.2.5

  • Home
  • Dialer Exclusive
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 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.
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 selectoris [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 KTDialerclass 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 optionsobject 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 minvalue. 
dialerObject.setMinValue(50);
setMaxValue(Number value) Sets a new maxvalue. 
dialerObject.setMaxValue(5.5);
update() Updates current value with minand maxvalues 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 increasemethod
kt.dialer.increased This event fires after running the increasemethod
kt.dialer.decrease This event fires before running the decreasemethod
kt.dialer.decreased This event fires before after the decreasemethod
kt.dialer.change This event fires before running the increaseor the decreasemethod
kt.dialer.changed This event fires after running the increaseor the decreasemethod 
var dialerElement = document.querySelector("#kt_dialer_example_1");
var dialerObject = new KTDialer(dialerElement, { /* options */ });
dialerObject.on('kt.dialer.increase', function(){ 
    // do something...
});