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:
copy
<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:
copy
<!--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:
copy
<!--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:
copy
// 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
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.
Methods
The following are the Dialer's functionality methods for more control.
Name
Description
increase
Increases the input value with the configured step value.
decrease
Decreases the input value with the configured step value.
getElement
Returns the Dialer's attached DOM element.
copy
var element = dialerObject.getElement();
Static Methods
createInstances(DOMString selectors)
Create a new Dialer instance
copy
KTDialer.createInstances('[data-kt-dialer="true"]');
getInstance(DOMElement element)
Get the Dialer instance created
copy
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
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
copy
var dialerElement = document.querySelector("#kt_dialer_example_1");
var dialerObject = new KTDialer(dialerElement, { /* options */ });
dialerObject.on('kt.dialer.increase', function(){
// do something...
});