jquery ui 滑块没有到达终点

Question

我的网站上有一个 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>

Answer 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() 似乎可以解决问题。

jquery ui 滑块没有到达终点

jquery ui slider not hitting end points

javascript

css

jquery

jquery-ui-slider