title: Foundation Range Slider with 2 Inputs?
body: <p>Is it possible to have 2 different inputs controlling a Foundation range slider? I need to add a field to set specific fractions (like so): <a href="https://codepen.io/jinch/pen/OaKpZX?editors=1000" rel="nofollow noreferrer">https://codepen.io/jinch/pen/OaKpZX?editors=1000</a></p>
  
  <pre><code>&lt;div class="row"&gt;
          &lt;div class="small-2 columns"&gt;Width:&lt;/div&gt;
    &lt;div class="small-5 columns"&gt;
            &lt;div class="slider" data-slider data-initial-start="20" data-options="precision:3; decimal:3; start:8; end:36;" style="margin-top: 12px;"&gt;
              &lt;span class="slider-handle slideWidth"  data-slider-handle role="slider" tabindex="1" aria-controls="customPort-2-width"&gt;&lt;/span&gt;
                &lt;span class="slider-fill" data-slider-fill&gt;&lt;/span&gt;
            &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="small-5 columns"&gt;
      &lt;input type="number" step="1" id="customPort-2-width" style="border: 1px solid #999999; display:inline-block; width:39%;"&gt;
      &lt;select class="fractions fractionWidth" name="WidthFraction" style="border: 1px solid #999999; display:inline-block; width:39%;"&gt;
        &lt;option value="0" selected=""&gt;0&lt;/option&gt;
        &lt;option value="1/8"&gt;1/8&lt;/option&gt;
        &lt;option value="1/4"&gt;1/4&lt;/option&gt;
        &lt;option value="3/8"&gt;3/8&lt;/option&gt;
        &lt;option value="1/2"&gt;1/2&lt;/option&gt;
        &lt;option value="5/8"&gt;5/8&lt;/option&gt;
        &lt;option value="3/4"&gt;3/4&lt;/option&gt;
        &lt;option value="7/8"&gt;7/8&lt;/option&gt;
              &lt;/select&gt;
      &lt;span class="small"&gt;in.&lt;/span&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p></p>