jQuery UI Slider + Gravity Forms Drop Down (Issue with Default Value)

by Jordan Smith

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css">
<div class="gf_browser_chrome gform_wrapper debt-slider-form_wrapper" id="gform_wrapper_172">
  <form method="post" enctype="multipart/form-data" target="gform_ajax_frame_172" id="gform_172" class="debt-slider-form" action="/apply-slider-1/" novalidate="novalidate" autocomplete="off">

    <div class="gform_body">
      <div id="gform_page_172_1" class="gform_page page-one">
        <div class="gform_page_fields">
          <ul id="gform_fields_172" class="gform_fields top_label form_sublabel_below description_below">
            <li id="field_172_37" class="gfield debt-slider desktop box-one gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible">
              <div class="ginput_container ginput_container_select">
                <select name="input_37" id="input_172_37" class="medium gfield_select" tabindex="999" aria-required="true" aria-invalid="false">
                  <option value="">$0</option>
                  <option value="$0 - $4,999">$1,000</option>
                  <option value="$0 - $4,999">$2,000</option>
                  <option value="$0 - $4,999">$3,000</option>
                  <option value="$0 - $4,999">$4,000</option>
                  <option value="$5,000 - $7,499">$5,000</option>
                  <option value="$5,000 - $7,499">$6,000</option>
                  <option value="$5,000 - $7,499">$7,000</option>
                  <option value="$7,500 - $9,999">$8,000</option>
                  <option value="$7,500 - $9,999">$9,000</option>
                  <option value="$10,000 - $14,999">$10,000</option>
                  <option value="$10,000 - $14,999">$11,000</option>
                  <option value="$10,000 - $14,999">$12,000</option>
                  <option value="$10,000 - $14,999">$13,000</option>
                  <option value="$10,000 - $14,999">$14,000</option>
     ...

CSS

body {
  margin: 50px;
}

select {
  margin-bottom: 60px;
}

.tooltip {
  position: absolute;
  z-index: 1020;
  display: block;
  padding: 5px;
  font-size: 18px;
  visibility: visible;
  margin-top: 0;
  bottom: 120%;
  margin-left: 0;
  left: -46px;
  right: 0;
  margin: auto;
  min-width: 115px;
  overflow: hidden;
  margin: 0 auto;
  text-align: center;
}

.tooltip .tooltip-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-top: 5px solid #18027a;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  position: absolute;
  width: 0;
  height: 0;
}

.tooltip-inner {
  padding: 5px 10px;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  background-color: #18027a;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.ui-slider {
  background: #ddd repeat-x bottom left;
  height: 20px;
  margin: 0;
  padding: 0px;
  border-radius: 50px;
  outline: none;
}

.ui-slider-range {
  height: 20px;
  border-bottom: none;
  position: relative;
  background: #18027a;
  border-radius: 20px;
  outline: none;
}

.ui-slider-handle {
  background: #18027a !important;
  height: 2.25rem !important;
  width: 2.25rem !important;
  margin: 0 !important;
  padding: 0px !important;
  display: inline-block !important;
  top: -.6rem !important;
  position: relative;
  border-radius: 1000px;
  border: .1875rem solid #fff;
  outline: none;
  margin-left: -1rem !important;
  cursor: pointer;
}

JavaScript

jQuery(document).ready(function($) {
  var sliderTooltipDesktop = function($selectDesktop, index) {
    var index = Math.max(0, index);
    var curValue = $selectDesktop.find('option').eq(index).text()
    var tooltip = '<div class="tooltip"><div class="tooltip-inner">' + curValue + '</div><div class="tooltip-arrow"></div></div>';

    $('.ui-slider-handle').html(tooltip);

  }

  $(function() {

    var $selectDesktop = $(".debt-slider.desktop .gfield_select");
    var $sliderDesktop = $("<div id='slider-desktop'></div>")
      .insertAfter($selectDesktop).slider({
        min: 1,
        max: $selectDesktop.find('option').length,
        range: "min",
        value: $selectDesktop[0].selectedIndex + 1,
        slide: function(event, ui) {
          $selectDesktop[0].selectedIndex = ui.value - 1;
          sliderTooltipDesktop($selectDesktop, ui.value - 1);
        }
      });
    $selectDesktop.on("change", function() {
      $sliderDesktop.slider("value", this.selectedIndex + 1);
    });

    sliderTooltipDesktop($selectDesktop, $selectDesktop[0].selectedIndex);

  });
});