jQuery UI Slider 在最低设置下显示初始值

Posted 2023-05-08

【中文标题】jQuery UI Slider 在最低设置下显示初始值

【英文标题】：jQuery UI Slider displays initial value on lowest setting

【发布时间】：2016-11-02 05:01:58

【问题描述】：

我有以下用于 jQuery UI 滑块的脚本。该脚本在 id 为 #skizzar_payment_amount 的 div 中显示金额

当我滚动到最低金额 (0) 时，div 中的值显示初始金额而不是 0。

看这里：

<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/

【参考方案1】：

ui.value 将是 0，也就是 false 在这一行：var curValue = ui.value || initialValue;

将其更改为例如：

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

更新fiddle

【参考方案2】：

我更新了你的fiddle 并添加了以下代码：

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

【参考方案3】：

试试这个：

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);
    

  );
);