Foundation 6 - slider input value? - slider

Question

I'm trying to disable a select drop down if the slider reaches its end point (4). The attached codepen example works but only when you change the input value directly. It does not work with the foundation slider.
Does anyone have advice on how I might get the foundation slider to play nice?
CODEPEN:
example here
HTML:
<div class="row">
<div class="small-2 columns">Height:</div>
<div class="small-5 columns">
<div class="slider" data-slider data-initial-start="3" data-options="precision:3; decimal:3; start:1; end:4; step:1;" style="margin-top: 12px;">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="y"></span>
<span class="slider-fill" data-slider-fill></span>
</div>
</div>
<div class="small-5 columns">
<input type="number" step="1" id="y" style="border: 1px solid #999999; display:inline-block; width:39%;">
<select id="HeightFraction" name="HeightFraction" style="border: 1px solid #999999; display:inline-block; width:39%;">
<option value="" 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>
</div>
JQUERY:
$( "#y" ).change(function() {
if (this.value == "4") {
$('#HeightFraction').prop('disabled', 'disabled');
}
else {
$('#HeightFraction').prop('disabled', false);
}
});

Answer 1

Your moved.zf.slider event from the documentation is ok.
The problem is in your if statement which tries to check if the slider's value equals 4. You need to use .val() instead of .value.
The complete snippet is below:
$(document).foundation();
// Code to disable the select drop down (if) the input value is at 4. The below code only works if adjusting the input directly - does not work if using the slider.
$("#y").change(function() {
if (this.value == "4") {
$('#HeightFraction').prop('disabled', true);
} else {
$('#HeightFraction').prop('disabled', false);
}
});
// In the Foundation doc "moved.zf.slider" is supposed to monitor change of the slider but I was not able to hook the value of the input to this to triger the code?
$('.slider').on('moved.zf.slider', function() {
"use strict";
if ($("#y").val() == "4") {
$('#HeightFraction').prop('disabled', true);
} else {
$('#HeightFraction').prop('disabled', false);
}
});
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.js"></script>
<script src="https://cdn.jsdelivr.net/what-input/1.1.4/what-input.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.1/foundation-flex.css" rel="stylesheet" />
<br/>
<br/>
<div class="row">
<div class="small-2 columns">Height:</div>
<div class="small-5 columns">
<div class="slider" data-slider data-initial-start="3" data-options="precision:3; decimal:3; start:1; end:4; step:1;" style="margin-top: 12px;">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="y"></span>
<span class="slider-fill" data-slider-fill></span>
</div>
</div>
<div class="small-5 columns">
<input type="number" step="1" id="y" style="border: 1px solid #999999; display:inline-block; width:39%;">
<select id="HeightFraction" name="HeightFraction" style="border: 1px solid #999999; display:inline-block; width:39%;">
<option value="" 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>
</div>