Switch - Documentation | Front - Multipurpose Responsive Template

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="../node_modules/nouislider/dist/nouislider.min.css">

              
                <!-- JS Implementing Plugins -->
                <script src="../assets/vendor/hs-switch/dist/hs-switch-text.min.js"></script>
                <script src="../node_modules/nouislider/dist/nouislider.min.js"></script>

                <!-- JS Front -->
                <script src="../assets/js/hs.nouislider.js"></script>

                <!-- 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
`target.selector`	The selector to which the text will be generated from the `target.text` attribute	`null`
`target.text`	Text to be updated inside the element specified in the `target.selector` attribute	`null`
`eventType`	Event that triggers a text update	`'change'`
`afterChange`	Function that fires immediately after the event specified in `eventType`	`null`
`startUpdateOnChange`	If `true`, the data attribute is overwritten with the new values. Useful when there is interaction with js plugins	`false`