jquery ui滑块没有到达终点答案

【问题标题】：jquery ui slider not hitting end pointsjquery ui滑块没有到达终点
【发布时间】：2021-05-13 13:02:05
【问题描述】：

我的网站上有一个 jquery ui 滑块。它从最左边的点开始，值为 500。它应该一直滑动到最右边的点，值为 38,000。问题是一旦你开始滑动手柄，它就不会再次落在最末端的点上。你可以把它调到 600 和 37900，但不能回到 500 或最高 38000。有人知道为什么吗？

$('.slider').slider({
    max: 38000,
    min: 500,
    step: 100,
    value: 500,
  });

.slider.ui-slider {
  width: 80vw;
}

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale = 1.0,
maximum-scale=1.0, user-scalable=no" />
    <!-- RESET -->
    <link rel="stylesheet" href="vendor/css/reset.css">
    <!-- BOX-SIZING RESET -->
    <link rel="stylesheet" href="vendor/css/box-sizing.css">
    <!-- LINK STYLESHEET -->
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="vendor\jquery-ui\jquery-ui-1.12.1.custom\jquery-ui.structure.css">
    <link rel="stylesheet" href="vendor\jquery-ui\jquery-ui-1.12.1.custom\jquery-ui.theme.css">
    <!-- LINK JQUERY -->
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
    <!-- LINK SCRIPT -->
    <script src="scripts/index.js"></script>
    <!-- LINK FONTS -->
    <link rel="stylesheet" href="https://use.typekit.net/stx2rzn.css">
    <!-- SOCIAL MEDIA ICON LIBRARY -->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<div class="slider"></div>

【问题讨论】：

无法重现您报告的问题。我添加了样式表，它似乎可以在 Chrome 88、Opera 74 和 Firefox 84 中使用。请参阅jsfiddle.net/derloopkat/8e4bpatr
我获取滑块值的方式导致了我的问题。我从那个小提琴复制并粘贴了你的代码，它工作得很好。非常感谢！！

标签： javascript jquery css jquery-ui-slider

【解决方案1】：

不确定原因或方式，但使用此代码显示的值不正确：

$('.slider').slider({
    max: 38000,
    min: 500,
    step: 100,
    value: 500
});

function getLoanAmount() {
    var loanAmount = $('.loanamount');
    var $selection = $( ".slider" ).slider( "value" );
    $(loanAmount).text($selection);
  }

  getLoanAmount();
  
  $('.slider').on('slide', function() {
    getLoanAmount();
  });

Daniel Manta 带来了一个 jsfiddle，它使用更简单的代码显示滑块值：

    $('.slider').slider({
      max: 38000,
      min: 500,
      step: 100,
      value: 500,
      slide: function(event, ui) {
        $("#sliderValue").html(ui.value);
      }
    });

    $("#sliderValue").val($(".slider").slider("value"));

使用滑动功能事件和.val()而不是.text()似乎可以解决它。

【讨论】：