Foundation Range Slider with 2 Inputs? - slider

Question

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): https://codepen.io/jinch/pen/OaKpZX?editors=1000
<div class="row">
<div class="small-2 columns">Width:</div>
<div class="small-5 columns">
<div class="slider" data-slider data-initial-start="20" data-options="precision:3; decimal:3; start:8; end:36;" style="margin-top: 12px;">
<span class="slider-handle slideWidth" data-slider-handle role="slider" tabindex="1" aria-controls="customPort-2-width"></span>
<span class="slider-fill" data-slider-fill></span>
</div>
</div>
<div class="small-5 columns">
<input type="number" step="1" id="customPort-2-width" style="border: 1px solid #999999; display:inline-block; width:39%;">
<select class="fractions fractionWidth" name="WidthFraction" style="border: 1px solid #999999; display:inline-block; width:39%;">
<option value="0" selected="">0</option>
<option value="1/8">1/8</option>
<option value="1/4">1/4</option>
<option value="3/8">3/8</option>
<option value="1/2">1/2</option>
<option value="5/8">5/8</option>
<option value="3/4">3/4</option>
<option value="7/8">7/8</option>
</select>
<span class="small">in.</span>
</div>

Answer 1

TL;DR The good news is this can be done! The bad news is that you'll need to adjust your code a bit. I'm typing this out at ten minutes past midnight so you will more than likely need to refactor this 😂but I hope it's a starting point.
I'll go into the reasons for the implementation, but if you want to just get into it, I've created a Codepen https://codepen.io/jamie-endeavour/pen/zyxPaY?editors=1010
A Bit of Background
When I first found this question I looked at the Slider documentation and noticed a section about 'Reflow' - https://foundation.zurb.com/sites/docs/slider.html#reflow - after reading about this method I decided to look in the Foundation source code:
_reflow() {
this.setHandles();
}
Then, I looked into setHandles()...
setHandles() {
if(this.handles[1]) {
this._setHandlePos(this.$handle, this.inputs.eq(0).val(), true, () => {
this._setHandlePos(this.$handle2, this.inputs.eq(1).val(), true);
});
} else {
this._setHandlePos(this.$handle, this.inputs.eq(0).val(), true);
}
}
Notice here that _setHandlePos() makes a reference to a value from a property called inputs.
When the Slider class is initialized the following are set:
this.inputs = this.$element.find('input');
this.$input = this.inputs.length ? this.inputs.eq(0) : $(`#${this.$handle.attr('aria-controls')}`);
In your example, you weren't supplying an input element. So as you can see the code is using the value of aria-controls to build up the selector of the 'input'. This is where your restriction lies as you won't be able to associate two input fields with the Slider this way.
The Solution
So, remember the ternary that was used in this.$input? If we add an <input> within your .slider element, then we can use this as a reference point for the Slider.
<div class="slider" data-slider data-initial-start="20" data-options="precision:3; decimal:3; start:8; end:36;" style="margin-top: 12px;">
<input type="hidden" id="slider-reference" value="8" />
...
Now that you have a reference that can be used between the two input fields. You can then update this reference field's value on the back of a change callback against each element, then Slider will read this and update accordingly.
The JS required for the number input is fairly straightforward as we are supplying the absolute number that Slider needs to calculate the width position.
The fraction input gets a bit funky because you need to return a fraction of the difference between your min and max value (28) rather than a fraction of your max value (36 in this case). This is why I've included additional calculations to ensure you get the correct position against the Slider element. This is also the part that I feel can be refactored with a fresh set of eyes 😬
Finally, once you have acquired the new values in each change handler you simply call the _reflow method and this will update the Slider plugin accordingly without you having to re-initialize the plugin or anything nasty like that!