Sam Skirrow Sam Skirrow - 5 months ago 13
Javascript Question

jQuery UI Slider displays initial value on lowest setting

I have the following script for a jQuery UI slider. The script shows the amount in a div with id #skizzar_payment_amount

When I scroll to the lowest amount (0), the value in the div shows the initial amount instead of 0.

See here:

<script>
jQuery(function($) {
var initialValue = 7.5;
var maxValue = 20;
var stepValue = 0.25;
var sliderTooltip = function(event, ui) {
var curValue = ui.value || initialValue; // current value (when sliding) or initial value (at start)
var tooltip = '<div class="tooltip"><div class="tooltip-inner">£' + curValue + '</div><div class="tooltip-arrow"></div></div>';
$('.ui-slider-handle').html(tooltip); //attach tooltip to the slider handle
$("#skizzar_payment_amount").val(ui.value); //change amount in hidden input field


}

$("#slider").slider({
value: initialValue,
min: 0,
max: maxValue,
step: stepValue,
create: sliderTooltip,
slide: sliderTooltip,
});
$("#skizzar_payment_amount").val($("#slider").slider("value"));

});
</script>


https://jsfiddle.net/yzzvd52y/

Answer

ui.value will be 0, which is false in this line: var curValue = ui.value || initialValue;

Change it to e.g.:

var curValue = ui.value !== undefined ? ui.value : initialValue;

Updated fiddle