Documentation v8.0.9

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
increase Increases the input value with the configured step value.
dialerObject.increase();
decrease Decreases the input value with the configured step value.
dialerObject.decrease();
getElement Returns the Dialer's attached DOM element.
var element = dialerObject.getElement();
Static Methods
createInstances(DOMString selectors) Create a new Dialer instance
KTDialer.createInstances('[data-kt-dialer="true"]');
getInstance(DOMElement element) Get the Dialer instance created
var dialerElement = document.querySelector("#kt_dialer_example_1");
var dialerObject = KTDialer.getInstance(dialerElement);

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...
});

Activity Logs

There are 2 new tasks for you in “AirPlus Mobile APp” project:
Added at 4:23 PM by
img
Meeting with customer
Application Design
img
img
A
In Progress
View
Project Delivery Preparation
CRM System Development
img
B
Completed
View
Invitation for crafting engaging designs that speak human workshop
Sent at 4:23 PM by
img
Task #45890merged with #45890in “Ads Pro Admin Dashboard project:
Initiated at 4:23 PM by
img
3 new application design concepts added:
Created at 4:23 PM by
img
New case #67890is assigned to you in Multi-platform Database Design project
Added at 4:23 PM by
Alice Tan
You have received a new order:
Placed at 5:05 AM by
img

Database Backup Process Completed!

Login into Metronic Admin Dashboard to make sure the data integrity is OK
Proceed
New order #67890is placed for Workshow Planning & Budget Estimation
Placed at 4:23 PM by
Jimmy Bold
Pic
Brian Cox 2 mins
How likely are you to recommend our company to your friends and family ?
5 mins You
Pic
Hey there, we’re just writing to let you know that you’ve been subscribed to a repository on GitHub.
Pic
Brian Cox 1 Hour
Ok, Understood!
2 Hours You
Pic
You’ll receive notifications for all issues, pull requests!
Pic
Brian Cox 3 Hours
You can unwatch this repository immediately by clicking here: Keenthemes.com
4 Hours You
Pic
Most purchased Business courses during this sale!
Pic
Brian Cox 5 Hours
Company BBQ to celebrate the last quater achievements and goals. Food and drinks provided
Just now You
Pic
Pic
Brian Cox Just now
Right before vacation season we have the next Big Deal for you.

Explore Metronic

Demo1

Demo2

demo
Coming soon

Demo3

demo
Coming soon

Demo4

demo
Coming soon

Demo5

Demo6

demo
Coming soon

Demo7

demo
Coming soon

Demo8

demo
Coming soon

Demo9

demo
Coming soon

Demo10

demo
Coming soon

Demo11

demo
Coming soon

Demo12

demo
Coming soon

Demo13

demo
Coming soon

Demo14

demo
Coming soon

Demo15

demo
Coming soon