JSFiddle - React, Tailwind, and code Playground

by Q4Dizzy

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div class="wrapper">
  <input type="text" id="min" name="min" class="slider-range" readonly>
  <input type="text" name="max" id="max" class="slider-range" readonly>
</div>

<div id="slider-range"></div>

CSS

.slider-range {
  color: #cb5700;
  background-color: transparent;
  border: none;
  width: 56px;
}

#slider-range {
  margin: 20px 0;
}

.slider-range:first-of-type {
  float: left;
}

.slider-range:last-of-type {
  float: right;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
  border: 2px solid #cb5700;
  background-color: white;
  border-radius: 100%;
  background-image: none;
  width: 14px;
  height: 14px;
}

.ui-slider-horizontal {
  height: 3px;
}

.ui-slider-horizontal .ui-slider-range {
  background-color: #1581cf;
}

.ui-slider-horizontal .ui-slider-handle {
  top: -0.5em;
}

.ui-widget-content {
  background-color: #aabec9;
}

JavaScript

$("#slider-range").slider({
  range: true,
  min: 0,
  max: 500,
  values: [75, 300],
  slide: function(event, ui) {
    $("#min").val(ui.values[0]);
    $("#max").val(ui.values[1]);
  }
});