JSFiddle - React, Tailwind, and code Playground

by isherwood

HTML

<div id="slider-range-price-sales"></div>
<div class="priceContainer">
    <div class="left">
        <input type="text" id="minPrice" name="minPrice" style="border: 0; color: #3D80E9; background:#F2F2F2; font-weight: bold;" />
    </div>
    <div class="right">
        <input type="text" id="maxPrice" name="maxPrice" style="border: 0; color: #3D80E9; background:#F2F2F2; font-weight: bold;" />
    </div>
</div>

CSS

body {padding: 50px;}

JavaScript

/* SALES SLIDER */
$("#slider-range-price-sales").slider({
    range: true,
    min: 0,
    max: 2000000,
    step: 50000,
    values: [100000, 2000000],
    slide: function (event, ui) {
        $("#minPrice").val("£" + ui.values[0]).toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "£1");
        $("#maxPrice").val("£" + ui.values[1]);
    }
});

$("#minPrice").val("£" + $("#slider-range-price-sales").slider("values", 0));
$("#maxPrice").val("£" + $("#slider-range-price-sales").slider("values", 1));