Documentation v8.0.36

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 Example

Basic example of Dialer based on Input Group:
<!--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 Example

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">
        <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 Example

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">
        <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 Reference

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 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
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
$ 939
Custom License
Reach us for custom license offers.
Buy Now
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