Toggle Switch
Switch from one value to another.
How to use?
Copy-paste the following
<script> near the
end of your pages under JS Blueberry 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>
$(document).on('ready', function () {
// initialization of toggle switch
$('.js-toggle-switch').each(function () {
var toggleSwitch = new HSToggleSwitch($(this)).init();
});
});
</script>
Basic examples
<!-- Toggle Switch -->
<div class="d-flex justify-content-center align-items-center mb-5">
<span class="font-size-1 text-muted">Monthly</span>
<label class="toggle-switch mx-2" for="customSwitch">
<input type="checkbox" class="js-toggle-switch toggle-switch-input" id="customSwitch" checked
data-hs-toggle-switch-options='{
"targetSelector": "#pricingCount1, #pricingCount2, #pricingCount3"
}'>
<span class="toggle-switch-label">
<span class="toggle-switch-indicator"></span>
</span>
</label>
<span class="font-size-1 text-muted">Annual</span>
</div>
<!-- End Toggle Switch -->
<!-- Pricing Section -->
<div class="row mx-n2">
<div class="col-sm-6 col-md-4 px-2 mb-3">
<!-- Pricing -->
<span class="d-block text-center">
<span class="text-dark align-top">৳</span>
<span class="font-size-4 text-dark font-weight-bold mr-n2">
<span id="pricingCount1"
data-hs-toggle-switch-item-options='{
"min": 4200,
"max": 3200
}'>3200</span>
</span>
<span class="font-size-1">/ mon</span>
</span>
<!-- End Pricing -->
</div>
<div class="col-sm-6 col-md-4 px-2 mb-3">
<!-- Pricing -->
<span class="d-block text-center">
<span class="text-dark align-top">৳</span>
<span class="font-size-4 text-dark font-weight-bold mr-n2">
<span id="pricingCount2"
data-hs-toggle-switch-item-options='{
"min": 6400,
"max": 5400
}'>5400</span>
</span>
<span class="font-size-1">/ mon</span>
</span>
<!-- End Pricing -->
</div>
<div class="col-sm-6 col-md-4 px-2 mb-3">
<!-- Pricing -->
<span class="d-block text-center">
<span class="text-dark align-top">৳</span>
<span class="font-size-4 text-dark font-weight-bold mr-n2">
<span id="pricingCount3"
data-hs-toggle-switch-item-options='{
"min": 8900,
"max": 7900
}'>7900</span>
</span>
<span class="font-size-1">/ mon</span>
</span>
<!-- End Pricing -->
</div>
</div>
<!-- End Pricing Section -->
Extend
By assigning a variable, you can call the standard methods of the plugin:
<script>
$(document).on('ready', function () {
// initialization of toggle state
$('.js-toggle-switch').each(function () {
var toggleSwitch = new HSToggleSwitch($(this)).init();
});
});
</script>
Attributes
By assigning a variable, you can call the standard methods of the plugin:
data-hs-toggle-switch-options='{
...
}' - array
data-hs-toggle-switch-item-options='{
...
}' - array
Methods
Options can be passed via data attributes or JavaScript. For
data attributes, append the option name to
data-hs-toggle-switch-options='{}'.
| 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. | - |