JSFiddle - React, Tailwind, and code Playground

by no2don

HTML

<script src="https://no2js.azurewebsites.net/adminlte231/plugins/jQuery/jQuery-2.1.4.min.js"></script>


<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.0.1/nouislider.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.0.1/nouislider.min.js"></script>


<div id="divRange" style='margin-bottom:100px'></div>



<input id="txtMin" value="1" />

<input id="txtMax" value="10" />

JavaScript

var rangeFoo = document.getElementById('divRange');

noUiSlider.create(rangeFoo, {
  start: [2, 9],
  animate: true,
  step: 1,
  range: {
    'min': 0,
    'max': 10
  },
  pips: {
    mode: 'positions',
    values: [0, 50, 100],
    density: 10,
    stepped: true
  }

});

rangeFoo.noUiSlider.on('update', function(values, handle) {
  $('#txtMin').val(parseInt(values[0]));
  $('#txtMax').val(parseInt(values[1]));

});