JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.3.0/nouislider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.5.1/nouislider.min.js"></script>
<div id="slider"></div>
<div id="startValue"></div>
<div id="afterInitValue"></div>
<input type="button" id="btn" value="set value to 1000">
<input type="button" id="btn1" value="set value to 8765450000">

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;
  }
});

var button = document.getElementById('btn');
button.addEventListener('click', function() {
  slider.noUiSlider.set(1000);
  document.getElementById('startValue').innerHTML = 1000;
});
var button1 = document.getElementById('btn1');
button1.addEventListener('click', function() {
  slider.noUiSlider.set(8765450000);
  document.getElementById('startValue').innerHTML = 8765450000;
});