jquery ui slider not hitting end points

Question

I have a jquery ui slider on my website. It starts at the left-most point, value 500. It should slide all the way to the right-most point, value 38,000. The problem is that once you begin sliding the handle, it doesn't land on the end-most points again. You can get it to 600 and 37900, but not back to 500 or up to 38000. Anyone know why?

$('.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

Not sure why or how, but using this code was displaying the incorrect value:

$('.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 came in with a jsfiddle that displays the slider value using much simpler code:

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

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

Using the slide function event and .val() instead of .text() seems to solve it.