<section class="vps-slider-section">
    <div class="plan_con">
        <div class="container">
          <div class="textbox plan_box">
            <div class="plan_tabs" id="tab_con1">
              <div class="plan-wrap">
                <div class="plan_inner" id="tab1">
                  <div class="slider-container">
                    <div class="sliderbox">
                        <div class="vps-slider-section-text text-left">
                            <h4 class="mb-lg-4 mb-md-3 mb-3">Choose Your VPS Server</h4>
                            <p>Customise resources to your requirements</p>
                          </div>
                      <div class="slider-row1">
                        <figure class="float-left mr-3"> <img src="assets/images/vps-slider-cpu-icon.png" alt=""></figure>
                        <label>CPU</label>
                        <div class="slide-value" id="cpu_val3">20Ghz</div>
                        <div id="sliderCpu3" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="width: 44.5312%; overflow: hidden;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 44.5312%;"></a></div>
                        <!--slider-row1--> 
                      </div>
                      <div class="slider-row1">
                        <figure class="float-left mr-3"> <img src="assets/images/vps-slider-ram-icon.png" alt=""></figure>
                        <label>Memory</label>
                        <div class="variation-4 slide-value" id="ram_val3">6GB</div>
                        <div class="variation-2 ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="sliderRam3"><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="width: 55.4688%; overflow: hidden;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 55.4688%;"></a></div>
                        <!--slider-row1--> 
                      </div>
                      <div class="slider-row1">
                        <figure class="float-left mr-3"> <img src="assets/images/vps-slider-bandwidth-icon.png" alt=""></figure>
                        <label>Bandwidth</label>
                        <div class="variation-5 slide-value" id="storage_val3">160GB</div>
                        <div class="variation-3 ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="sliderDisk3"><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="width: 66.4062%; overflow: hidden;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 66.4062%;"></a></div>
                        <!--slider-row1--> 
                      </div>
                      <!--sliderbox--> 
                    </div>
                    <div class="slider_content text-left">
                        <p class="vps-slider-section-inner-text">Add additional resources and
                            services (optional)</p>
                        <h6 class="mb-3">Operating System:</h6>   
                        <div class="form-group">    
                            <select class="form-control select-form" id="exampleFormControlSelect1">
                                <option>Choose Operating System</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                            </select> 
                        </div> 
                        <div>
                            <p class="vps-slider-paragraph mb-xl-3 mb-lg-3 mb-md-3 mb-sm-2 mb-2">Starting at:</p>
                            <div class="pricebox">
                                <div class="pricetxt">
                                    <span class="doller">$</span> <span class="numeric" id="price_val3">482.25</span>
                                    /mo</div>
                                  <div class="white_btn"><a id="orderbtn_tab3" class="buynow-button" href="https://www.your-domain.com/?cmd=cart&amp;action=add&amp;disk=100&amp;ram=80&amp;cpu=75">Order Now</a></div>
                                <!--pricebox--> 
                                </div>
                                <div class="clear"></div>
                                <!--slider_content--> 
                        </div>
                      <!--slider_content--> 
                    </div>
                    <!--slider-container--> 
                  </div>
                </div>
                <div class="plan_inner hide" id="tab2" style="position: relative; top: 0px; left: 0px; display: none;">
                  <div class="slider-container">
                    <div class="sliderbox">
                      <div class="slider-row1">
                        <label>CPU</label>
                        <div class="slide-value" id="cpu_val2">18Ghz</div>
                        <div id="sliderCpu2" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="width: 33.5938%; overflow: hidden;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 33.5938%;"></a></div>
                        <!--slider-row1--> 
                      </div>
                      <div class="slider-row1">
                        <label>RAM</label>
                        <div class="slide-value" id="ram_val2">1GB</div>
                        <div id="sliderRam2" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="width: 22.6562%; overflow: hidden;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 22.6562%;"></a></div>
                        <!--slider-row1--> 
                      </div>
                      <div class="slider-row1">
                        <label>HDD</label>
                        <div class="slide-value" id="storage_val2">100GB</div>
                        <div id="sliderDisk2" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="width: 44.5312%; overflow: hidden;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 44.5312%;"></a></div>
                        <!--slider-row1--> 
                      </div>
                      <!--sliderbox--> 
                    </div>
                    <div class="slider_content">
                      <div class="pricebox">
                        <div class="pricetxt"><br>
                          <span class="doller">$</span> <span class="numeric" id="price_val2">402.25</span><br>
                          per month</div>
                        <div class="white_btn"><a id="orderbtn_tab2" class="buynow-button" href="https://www.your-domain.com/?cmd=cart&amp;action=add&amp;disk=75&amp;ram=25&amp;cpu=50">Order Now</a></div>
                        <!--pricebox--> 
                      </div>
                      <div class="clear"></div>
                      <!--slider_content--> 
                    </div>
                    <!--slider-container--> 
                  </div>
                </div>
                <div class="plan_inner hide" id="tab3" style="position: relative; top: 0px; left: 0px; display: none;">
                  <div class="slider-container">
                    <div class="sliderbox">
                      <div class="slider-row1">
                        <label>CPU</label>
                        <div class="slide-value" id="cpu_val2">18Ghz</div>
                        <div id="sliderCpu" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="width: 33.5938%; overflow: hidden;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 33.5938%;"></a></div>
                        <!--slider-row1--> 
                      </div>
                      <div class="slider-row1">
                        <label>RAM</label>
                        <div class="slide-value" id="ram_val2">1GB</div>
                        <div id="sliderRam" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="width: 22.6562%; overflow: hidden;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 22.6562%;"></a></div>
                        <!--slider-row1--> 
                      </div>
                      <div class="slider-row1">
                        <label>HDD</label>
                        <div class="slide-value" id="storage_val2">100GB</div>
                        <div id="sliderDisk" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="width: 44.5312%; overflow: hidden;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 44.5312%;"></a></div>
                        <!--slider-row1--> 
                      </div>
                      <!--sliderbox--> 
                    </div>
                    <div class="slider_content">
                        <div class="pricebox">
                          <div class="pricetxt">
                            <span class="doller">$</span> <span class="numeric" id="price_val3">482.25</span><br>
                            per month</div>
                          <div class="white_btn"><a id="orderbtn_tab3" class="buynow-button" href="https://www.your-domain.com/?cmd=cart&amp;action=add&amp;disk=100&amp;ram=80&amp;cpu=75">Order Now</a></div>
                          <!--pricebox--> 
                        </div>
                        <div class="clear"></div>
                        <!--slider_content--> 
                    </div>
                </div>
              </div>
              <!--tab_con1--> 
            </div>
            <!--plan_box--> 
          </div>
          
          <!--wrapper--> 
        </div>
        <!--plan_con--> 
      </div>  
</div></section>