Toggle Switch
Switch from one value to another.
How to use
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
<script src="./assets/vendor/hs-toggle-switch/dist/hs-toggle-switch.min.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.
<script>
(function() {
// INITIALIZATION OF TOGGLE SWITCH
// =======================================================
new HSToggleSwitch('.js-toggle-switch')
});
</script>
Basic example
19
39
59
<!-- Form Switch -->
<div class="d-flex justify-content-center mb-4">
<div class="form-check form-switch form-switch-between">
<label class="form-check-label">Monthly</label>
<input class="js-toggle-switch form-check-input" type="checkbox"
data-hs-toggle-switch-options='{
"targetSelector": "#pricingCount1, #pricingCount2, #pricingCount3"
}'>
<label class="form-check-label">Annually</label>
</div>
</div>
<!-- End Form Switch -->
<div class="row justify-content-center">
<div class="col-md-3 mb-3 mb-md-0">
<h2 id="pricingCount1" class="display-4 text-center"
data-hs-toggle-switch-item-options='{
"min": 19,
"max": 29
}'>19</h2>
</div>
<!-- End Col -->
<div class="col-md-3 mb-3 mb-md-0">
<h2 id="pricingCount2" class="display-4 text-center"
data-hs-toggle-switch-item-options='{
"min": 39,
"max": 49
}'>39</h2>
</div>
<!-- End Col -->
<div class="col-md-3 mb-3 mb-md-0">
<h2 id="pricingCount3" class="display-4 text-center"
data-hs-toggle-switch-item-options='{
"min": 59,
"max": 69
}'>59</h2>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
Modal example
Toggle Switch
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Open modal</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Toggle Switch</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<!-- Form Switch -->
<div class="d-flex justify-content-center mb-4">
<div class="form-check form-switch form-switch-between">
<label class="form-check-label">Monthly</label>
<input class="js-toggle-switch form-check-input" type="checkbox"
data-hs-toggle-switch-options='{
"targetSelector": "#pricingCountModal1, #pricingCountModal2, #pricingCountModal3"
}'>
<label class="form-check-label">Annually</label>
</div>
</div>
<!-- End Form Switch -->
<div class="row justify-content-center">
<div class="col-md-3 mb-3 mb-md-0">
<h2 id="pricingCountModal1" class="display-4 text-center"
data-hs-toggle-switch-item-options='{
"min": 19,
"max": 29
}'>19</h2>
</div>
<!-- End Col -->
<div class="col-md-3 mb-3 mb-md-0">
<h2 id="pricingCountModal2" class="display-4 text-center"
data-hs-toggle-switch-item-options='{
"min": 39,
"max": 49
}'>39</h2>
</div>
<!-- End Col -->
<div class="col-md-3 mb-3 mb-md-0">
<h2 id="pricingCountModal3" class="display-4 text-center"
data-hs-toggle-switch-item-options='{
"min": 59,
"max": 69
}'>59</h2>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- End Modal -->
Methods
| Parameters | Description | Default value |
|---|---|---|
|
|
Selectors in which the text value will be changed from min to max with animation, for each element specified in the array. Essentially, count up/count down happens. |
undefined |
|
|
true is necessary to prepare a script for the correct processing of data, in those cases when the control element (entity), in the active (active) state. |
false |
|
|
Event that runs the script. | 'change' |
|
|
Default value for each item. | - |
|
|
Maximum value (to which count up will be carried out), for each item. | - |