CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-slider
Sam Skirrow
Sam Skirrow

Reputation: 3697

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/

Upvotes: 2

Views: 432

Answers (3)

Govind Samrow
Govind Samrow

Reputation: 10189

Try this:

jQuery(function($) {
  var initialValue = 7.5;
  var maxValue = 20;
  var stepValue = 0.25;
  var sliderTooltip = function(event, ui) {
    var curValue = ui.value >= 0 ? 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,
    change: function(event, ui) {
      $("#skizzar_payment_amount").val(ui.value);
    }

  });
});

Upvotes: 0

Shlomi Haver
Shlomi Haver

Reputation: 974

I updated your fiddle and added the following code:

change: function( event, ui ) {
             $("#skizzar_payment_amount").val(ui.value);
}

Upvotes: 0

Arg0n
Arg0n

Reputation: 8423

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

Upvotes: 2

Related Questions