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 Implementing Plugins to enable it.
<script src="./assets/vendor/hs-toggle-state/dist/hs-toggle-state.min.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body>
tag, to enable it.
<script>
(function() {
// INITIALIZATION OF SWITCH TEXT
// =======================================================
new HSSwitchText('.js-switch-text')
})()
</script>
Basic example
<form>
<!-- Radio Button Group -->
<div class="text-center mb-5">
<div class="btn-group btn-group-segment btn-group-pills" role="group" aria-label="Pricing radio button group">
<input type="radio" class="js-switch-text btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked
data-hs-switch-text-options='{
"target": [{
"selector": "#rangeSliderResult",
"text": 500
}, {
"selector": "#rangeSliderSecondaryResult",
"text": 50000
}],
"startUpdateOnChange": true
}'>
<label class="js-toggle-switch btn btn-sm" for="btnradio1">
Monthly
</label>
<input type="radio" class="js-switch-text btn-check" name="btnradio" id="btnradio2" autocomplete="off"
data-hs-switch-text-options='{
"target": [{
"selector": "#rangeSliderResult",
"text": 475
}, {
"selector": "#rangeSliderSecondaryResult",
"text": 25000
}],
"startUpdateOnChange": true
}'>
<label class="js-toggle-switch btn btn-sm" for="btnradio2">
<span class="form-switch-promotion">
Annually
<!-- Form Switch Promotion -->
<span class="form-switch-promotion-container">
<span class="form-switch-promotion-body">
<svg class="form-switch-promotion-arrow" 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>
<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"></path>
</svg>
<span class="form-switch-promotion-text">
<span class="badge bg-primary rounded-pill ms-1">Save up to 10%</span>
</span>
</span>
</span>
<!-- End Form Switch Promotion -->
</span>
</label>
</div>
</div>
<!-- End Radio Button Group -->
<!-- Range Slider -->
<div class="display-4 text-dark text-center">
$<span id="rangeSliderResult"></span>/mo
</div>
<div class="d-flex justify-content-center mb-5">
Maximum ad spend:
<span class="text-primary ms-1">$<span id="rangeSliderSecondaryResult">50000</span>/mo</span>
</div>
<!-- End Range Slider -->
</form>
<div class="text-center mb-5">
<div class="range-slider">
<div class="js-nouislider"
data-hs-nouislider-options='{
"range": {
"min": 250,
"max": 720
},
"connect": [true, false],
"start": 500,
"result_min_target_el": "#rangeSliderResult"
}'>
</div>
</div>
</div>
<link rel="stylesheet" href="../assets/vendor/nouislider/dist/nouislider.min.css">
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/hs-switch/dist/hs-switch-text.min.js"></script>
<script src="../assets/vendor/nouislider/dist/nouislider.min.js"></script>
<!-- JS Front -->
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF SWITCH TEXT
// =======================================================
new HSSwitchText('.js-switch-text', {
afterChange() {
document.querySelector('.js-nouislider').noUiSlider.set([this.target[0].text])
}
})
// INITIALIZATION OF NOUISLIDER
// =======================================================
HSCore.components.HSNoUISlider.init(document.querySelector('.js-nouislider'))
const slider = HSCore.components.HSNoUISlider.getItem(0)
slider.on('change', function (val) {
const input = document.querySelector('.js-switch-text:checked'),
defData = JSON.parse(input.getAttribute('data-hs-switch-text-options'))
defData.target[0].text = val[0]
input.setAttribute('data-hs-switch-text-options', JSON.stringify(defData))
})
})()
</script>
Methods
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 |