Overview
Dialer is an exclusive plugin of
Start HTML Pro 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 |
|---|---|
Constructor
|
Constructs a new instance of
KTDialerclass and initializes a Dialer control:
Remove
data-kt-dialer="true"attribute to avoid lazy initializes. |
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.
|
| Static Methods | |
createInstances(DOMString selectors)
|
Create a new Dialer instance
|
getInstance(DOMElement element)
|
Get the Dialer instance created
|
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...
});
2021©
Keenthemes
