JSFiddle - React, Tailwind, and code Playground

by akhlaque

HTML

<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Price Range Slider | Webdevtrick.com</title>
  <link rel="stylesheet" href="style.css">

</head>

<body>
 <div class="price_range"></div>
  <div class="output"></div>
  <div class="slider_input">
    <form>
      <input type="text" id="range" class="input_slides">
      <input type="text" id="range-1" class="input_slides">
    </form>
  </div>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" type="text/css"
    media="all" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" type="text/javascript"></script>
  <script src="index.js"></script>
  <link rel="stylesheet" href="style.css">
</body>

</html>

JavaScript

var details = {
    "books": 20,
    "pens": 60,
    "ink": 90,
    "table": 120,
    "chair": 170,
    "shoes": 220,
    "boots": 320,
};

$(document).ready(function() {

      $(".price_range").slider({
          max: 500,
          range: true,
          values: [0, 500],
          change: function(event, ui) {
              getDetails(ui.values[0], ui.values[1]);
          }
      });

      var current = $(".price_range").slider("option", "values");
      getDetails(current[0], current[1]);
  });

  function getDetails(minimum, maximum) {
      $("#range").val("" + minimum);
      $("#range-1").val("" + maximum);
      var result = "<table><tr><th>Product Name</th>  <th>Price (in $)</th></tr>";
      for (var item in details) {
          if (details[item] >= minimum && details[item] <= maximum) {
              result += "<tr><td>" + item + "</td><td>" + details[item] + "</td></tr>";
          }
      }
      result += "</table>";
      $(".output").html(result);

  }
  
  $(document).ready(function(){

  $(".input_slides").change(function() {
    var $this = $(this);
    $(".price_range").slider("values", $this.data("index"), $this.val());
});

})