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>
                        
                      

JavaScript behavior

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

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
Contact Us