JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="col-md-12">
  <div id="slider"></div>
</div>
<div class="amount">
  <div class="min-price"></div>
  <div class="max-price"></div>
</div>

CSS

.col-md-12 {
  margin: 2em 5em;
}

#slider {
  height: 6px;
  background: #0F0;
}

#slider .ui-slider-range {
  background: green;
}

#slider .ui-slider-handle {
  margin-top: 14px;
  transform: rotate(45deg);
  border: 0;
  background: #00F;
}

.amount div {
  width: 10em;
  text-align: center;
}

JavaScript

$(function() {
  function addCommas(nStr) {
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
  }

  $("#slider").slider({
    range: true,
    min: -10000000,
    max: -1000,
    values: [-8000000, -2000],
    slide: function(event, ui) {
      $(".amount .min-price").text(addCommas(ui.values[1] * -1) + " ریال ").position({
        my: "center top",
        at: "center bottom+15",
        of: "#slider .ui-slider-handle:eq(1)"
      });
      $(".amount .max-price").text(addCommas(ui.values[0] * -1) + " ریال ").position({
        my: "center top",
        at: "center bottom+15",
        of: "#slider .ui-slider-handle:eq(0)"
      });
    }
  });
  $(".amount .min-price").text(addCommas($("#slider").slider("values", 1) * -1) + " ریال ").position({
    my: "center top",
    at: "center bottom+15",
    of: "#slider .ui-slider-handle:eq(1)"
  });
  $(".amount .max-price").text(addCommas($("#slider").slider("values", 0) * -1) + " ریال ").position({
    my: "center top",
    at: "center bottom+15",
    of: "#slider .ui-slider-handle:eq(0)"
  });
  // Hover states on the static widgets
  $("#dialog-link, #icons li").hover(
    function() {
      $(this).addClass("ui-state-hover");
    },
    function() {
      $(this).removeClass("ui-state-hover");
    }
  );
});