filter price-range

\\html
<div class="filter price-filter">
  <h2 class="filter-title" class="filter-title">FILTER BY PRICE</h2>
  <div id="slider-range"></div>
  <div class="price-display">
    <span class="price-text">Price: <span id="amount1">$0</span> — <span id="amount2">$8,200</span></span>
  <button class="filter-button">FILTER</button>
  </div>
</div>

\\css
.price-filter {
    max-width: 400px;
    padding: 20px;
    font-family: Arial, sans-serif;
}

#slider-range {
    margin-bottom: 25px;
}

.ui-slider-horizontal {
    height: 4px;
    background: #e0e0e0;
    border: none;
}

.ui-slider .ui-slider-handle {
    width: 4px;
    height: 16px;
    background: #82b440;
    top: -7px;
    cursor: pointer;
    border-radius: 0;
}

.ui-slider .ui-slider-range {
    background: #82b440;
}

.ui-slider-horizontal .ui-slider-handle{
    margin-left: -1px;
}

.ui-widget.ui-widget-content{
    border: none;
}

.ui-slider-horizontal{
    height: 2px;
}

\\cdn jquery ui
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>

\\ jquery
$(document).ready(function() {
  $("#slider-range").slider({
    range: true,
    min: 0,
    max: 8200,
    values: [0, 8200],
    slide: function(event, ui) {
      $("#amount1").text(ui.values[0].toLocaleString());
      $("#amount2").text(ui.values[1].toLocaleString());
    }
  });

  $(".filter-button").click(function() {
    var minValue = $("#slider-range").slider("values", 0);
    var maxValue = $("#slider-range").slider("values", 1);
  });
});