JSFiddle - React, Tailwind, and code Playground

by serGlazkov

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.3.0/nouislider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.3.0/nouislider.min.css">
<div id="slider"></div>
<div id="startValue"></div>
<div id="afterInitValue"></div>

JavaScript

var slider = document.getElementById('slider');
var settings = {
  connect: "lower",
  range: {
    max: 87654567890,
    min: 0
  },
  start: 30679098762, //30679098762, 8765456788 - same bad result
  step: 1
}

document.getElementById('startValue').innerHTML = settings.start;
noUiSlider.create(slider, settings);
slider.noUiSlider.on('update', function(values, handle) {
  var sliderValue = values[handle];
  if (!isNaN(sliderValue)) {
    document.getElementById('afterInitValue').innerHTML = sliderValue;
  }
});