Switch
It is for switching from one setting to another.
How to use?
Copy-paste the following <script> near the end of your pages under JS Front to enable it.
<script src="../../assets/vendor/hs-switch/dist/hs-switch-text.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 state
$('.js-switch-text').each(function () {
var switchText = new HSSwitchText($(this)).init();
});
});
</script>
Basic examples
$/mo
Maximum ad spend:
$25000/mo
All features
Email support
Google ads
SSO via Google
API access
Facebook ads
<!-- Card -->
<div class="card text-center z-index-2" data-aos="fade-up">
<div class="card-body p-7">
<!-- Group Toggle Switch -->
<div class="btn-group btn-group-sm btn-group-toggle btn-group-segment btn-group-pills my-5" data-toggle="buttons">
<label class="btn active">
<input type="radio" name="options" id="option1" class="js-switch-text" checked
data-hs-switch-text-options='{
"target": [{
"selector": "#rangeSliderResult",
"text": 500
}, {
"selector": "#rangeSliderSecondaryResult",
"text": 50000
}],
"startUpdateOnChange": true
}'> Monthly
</label>
<label class="btn">
<input type="radio" name="options" id="option2" class="js-switch-text"
data-hs-switch-text-options='{
"target": [{
"selector": "#rangeSliderResult",
"text": 475
}, {
"selector": "#rangeSliderSecondaryResult",
"text": 25000
}],
"startUpdateOnChange": true
}'> Yearly
<!-- Arrow -->
<figure class="position-absolute top-0 text-nowrap mt-n5 ml-7">
<svg class="d-block position-absolute mt-n2 ml-n4" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 99.3 57" width="48">
<path fill="none" stroke="#bdc5d1" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M2,39.5l7.7,14.8c0.4,0.7,1.3,0.9,2,0.4L27.9,42"/>
<path fill="none" stroke="#bdc5d1" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M11,54.3c0,0,10.3-65.2,86.3-50"/>
</svg>
<span class="badge badge-primary badge-pill py-2 px-3">Save up to 10%</span>
</figure>
<!-- End Arrow -->
</label>
</div>
<!-- End Group Toggle Switch -->
<!-- Range Slider -->
<div class="display-4 font-size-md-down-4 text-dark">
$<span id="rangeSliderResult"></span>/mo
</div>
<div class="d-flex justify-content-center mb-5">
Maximum ad spend:
<span class="text-primary ml-1">$25000/mo</span>
</div>
<!-- End Range Slider -->
<div class="mb-5">
<input class="js-ion-range-slider" type="text"
data-hs-ion-range-slider-options='{
"extra_classes": "range-slider",
"type": "single",
"min": 250,
"max": 750,
"step": 25,
"from": 500,
"secondary_val": {
"steps": [250, 275, 300, 325, 350, 375, 400, 425, 450, 475, 500, 525, 550, 575, 600, 625, 650, 675, 700, 725, 750],
"values": [25000, 27000, 30000, 32000, 35000, 37000, 40000, 42000, 45000, 47000, 50000, 52000, 55000, 57000, 60000, 62000, 65000, 67000, 70000, 72000, 75000]
},
"prefix": "$",
"secondary_target_el": "#rangeSliderSecondaryResult",
"result_min_target_el": "#rangeSliderResult"
}'>
</div>
<!-- List -->
<div class="row">
<div class="col-sm-6">
<div class="media text-left text-body mb-2">
<i class="fas fa-check-circle text-success mt-1 mr-2"></i>
<div class="media-body">
All features
</div>
</div>
<div class="media text-left text-body mb-2">
<i class="fas fa-check-circle text-success mt-1 mr-2"></i>
<div class="media-body">
Email support
</div>
</div>
<div class="media text-left text-body mb-2">
<i class="fas fa-check-circle text-success mt-1 mr-2"></i>
<div class="media-body">
Google ads
</div>
</div>
</div>
<div class="col-sm-6">
<div class="media text-left text-body mb-2">
<i class="fas fa-check-circle text-success mt-1 mr-2"></i>
<div class="media-body">
SSO via Google
</div>
</div>
<div class="media text-left text-body mb-2">
<i class="fas fa-check-circle text-success mt-1 mr-2"></i>
<div class="media-body">
API access
</div>
</div>
<div class="media text-left text-body mb-2">
<i class="fas fa-check-circle text-success mt-1 mr-2"></i>
<div class="media-body">
Facebook ads
</div>
</div>
</div>
</div>
<!-- End List -->
</div>
<div class="card-footer px-7">
<a class="font-weight-bold" href="#">Start free 14-day trial <i class="fas fa-angle-right fa-sm ml-1"></i></a>
</div>
</div>
<!-- End Card -->
<!-- JS Implementing Plugins -->
<link rel="stylesheet" href="../../assets/vendor/ion-rangeslider/css/ion.rangeSlider.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/hs-switch/dist/hs-switch-text.min.js"></script>
<script src="../../assets/vendor/ion-rangeslider/js/ion.rangeSlider.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/hs.ion-range-slider.js"></script>
<script>
$(document).on('ready', function () {
// initialization of ion range slider
var ionRangeSlider = $.HSCore.components.HSIonRangeSlider.init($('.js-ion-range-slider'), {
cusOnChange: function () {
var $checked = $('.js-switch-text:checked'),
defData = JSON.parse($checked.attr('data-hs-switch-text-options'));
defData.target[0].text = $('#rangeSliderResult').text();
defData.target[1].text = $('#rangeSliderSecondaryResult').text();
$checked.attr('data-hs-switch-text-options', JSON.stringify(defData));
}
});
// initialization of switch
$('.js-switch-text').each(function () {
var switchText = new HSSwitchText($(this), {
afterChange: function () {
ionRangeSlider.data('ionRangeSlider').update({
from: $(this)[0].target[0].text
});
}
}).init();
});
});
</script>
Extend
By assigning a variable, you can call the standard methods of the plugin:
<script>
$(document).on('ready', function () {
// initialization of switch
$('.js-switch-text').each(function () {
var switchText = new HSSwitchText($(this)).init();
});
});
</script>
Attributes
By assigning a variable, you can call the standard methods of the plugin:
data-hs-switch-text-options='{
...
}' - array
Methods
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-toggle-state-options='{}'.
| Parameters | Description | Default value |
|---|---|---|
|
|
The selector to which the text will be generated from the target.text attribute |
null |
|
|
Text to be updated inside the element specified in the target.selector attribute |
null |
|
|
Event that triggers a text update | 'change' |
|
|
Function that fires immediately after the event specified in eventType |
null |
|
|
If true, the data attribute is overwritten with the new values. Useful when there is interaction with js plugins |
false |