JSFiddle - React, Tailwind, and code Playground

by Keith Jeter

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/css/ion.rangeSlider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/js/ion.rangeSlider.min.js"></script>
   <input type="text" class="js-range-slider" name="my_range" value=""
        data-skin="round"
        data-type="double"
        data-min="0"
        data-max="10000"
        data-grid="false"
    />

<!--<input type="number" maxlength="4" value="0" class="from"/>
<input type="number" maxlength="4" value="1000" class="to"/>-->

CSS

.irs--round .irs-bar {
   background-color: #2b3280;
}

.irs--round .irs-handle {
  background-color: #2b3280;
  border-color: #2b3280;
  box-shadow: 0px 0px 0px 5px rgba(43, 50, 128, 0.2);
}

.irs--round .irs-handle.state_hover, 
.irs--round .irs-handle:hover {
   background-color: #2b3280;
}

.irs--round .irs-handle {
  cursor: pointer;
  width: 16px;
  height: 16px;
  top: 29px;
}

.irs--round .irs-from, 
.irs--round .irs-to, 
.irs--round .irs-single {
  background-color: transparent;
  color: #666666;
}

.irs--round .irs-from:before, 
.irs--round .irs-to:before, 
.irs--round .irs-single:before,
.irs--round .irs-min, 
.irs--round .irs-max {
  display: none;
}

JavaScript

var $range = $(".js-range-slider"),
    $from = $range, // Updated selector
    $to = $range, // Updated selector
    range,
    min = $range.data('min'),
    max = $range.data('max'),
    from,
    to;

var updateValues = function () {
    $from.val("$" + from.toString());
    $to.val("$" + to.toString());
};

$range.ionRangeSlider({
    onChange: function (data) {
      from = "$" + data.from.toString();
      to = "$" + data.to.toString();
      updateValues();
    }
});

range = $range.data("ionRangeSlider");
var updateRange = function () {
    range.update({
        from: from,
        to: to
    });
};

$from.on("input", function () {
    from = "$" + $(this).val().toString();
    if (parseFloat(from) < min) {
        from = "$" + min.toString();
    }
    if (parseFloat(from) > parseFloat(to)) {
        from = "$" + to.toString();
    }
    updateValues();
    updateRange();
});

$to.on("input", function () {
    to = "$" + $(this).val().toString();
    if (parseFloat(to) > max) {
        to = "$" + max.toString();
    }
    if (parseFloat(to) < parseFloat(from)) {
        to = "$" + from.toString();
    }
    updateValues();
    updateRange();
});