JSFiddle - React, Tailwind, and code Playground

by dav sev

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>
  <label for="amount">Price range:</label>
  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
 
<div id="slider-range"></div>

JavaScript

$(function() {
    $("#slider-range").slider({
        range: true,
        min: 10000,
        max: 10000000,
        values: [1000000, 4000000],
        slide: function(event, ui) {
            $("#amount").val("₪" + ui.values[0] + " - ₪" + ui.values[1]);
        }
    });
    
    $("#amount").val("₪" + $("#slider-range").slider("values", 0) +
        " - ₪" + $("#slider-range").slider("values", 1));

        $('#slider-range').slider({
            change: function(event, ui) { 

            var newMin = jQuery('#slider-range').slider("values")[0]; 
            var newMax = jQuery('#slider-range').slider("values")[1]; 
   
        } 
    });
});