JSFiddle - React, Tailwind, and code Playground

by LuckyLuzz

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/12.1.0/nouislider.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/12.1.0/nouislider.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/bootstrap-input-spinner.min.js"></script>
<table class="table">
  <tr>
    <td colspan="3">
      <label for="nouisliderpHKH">Slider 0-100% with step 10</label>
      <div class="withpip" id="nouisliderpHKH"></div>
    </td>
  </tr>
  <tr>
    <td>Switching hysteresis</td>
    <td>
      <span style="position: absolute; margin-left: 80px; margin-top: 6px; z-index: 101;">$</span>
    <input style="width: 30px" type="number" id="input-number" data-decimals="2" value="50" min="0" max="100" step="0.05" />
    

    

    </td>
  </tr>
</table>

CSS

.noUi-tooltip {
  display: none;
}

.noUi-active .noUi-tooltip {
  display: block;
}

.withpip {
  margin-bottom: 30px
}

.noUi-horizontal {
  width: 400px
}

.NumberInputSpinner {
  margin: auto;
  max-width: 9rem
}

JavaScript

var config = {
   decrementButton: "<strong>-</strong>", // button text
   incrementButton: "<strong>+</strong>", // ..
   groupClass: "NumberInputSpinner", // css class of the input-group (sizing with input-group-sm or input-group-lg)
   buttonsClass: "btn-outline-secondary",
   buttonsWidth: "5px",
   textAlign: "center",
   autoDelay: 500, // ms holding before auto value change
   autoInterval: 100, // speed of auto value change
   boostThreshold: 10, // boost after these steps
   boostMultiplier: "auto", // you can also set a constant number as multiplier
   locale: null // the locale for number rendering; if null, the browsers language is used
 }
 $("input[type='number']").inputSpinner(config)

 var range_kh_slider = {
   'min': [0, 10],
   '10%': [10, 10],
   '50%': [50, 10],
   'max': [100]
 };

 var sliderph_HY = document.getElementById('nouisliderpHKH');
 noUiSlider.create(sliderph_HY, {
   range: range_kh_slider,
   start: [50],
   tooltips: [true],
   pips: {
     mode: 'values',
     values: [0, 50, 100],
     density: 10,
     stepped: true
   },
 });

 var inputNumber = document.getElementById('input-number');

 inputNumber.addEventListener('change', function() {
   sliderph_HY.noUiSlider.set(this.value);
 });


 sliderph_HY.noUiSlider.on('update', function(values, handle) {
   inputNumber.setValue(values[handle]);
 });