<div class="container">
  <div id="slider"></div>
</div>

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

.container {
  max-width: 500px;
  margin: 4rem 2rem 4rem;
}

#slider-value {
  margin-bottom: 2rem;
}

#console {
  padding: 1rem;
  border: 1px dotted #000;
}

#console p {
  margin-bottom: .25rem;
  margin-top: 0;
}

const slider = document.getElementById('slider');
const valueElement = document.getElementById('slider-value');
const consoleBox = document.getElementById('console');

 noUiSlider.create(slider, {
      start: [5000],
      range: {
        'min': 0,
        'max': 10000
      },
      format: {
        to: function (value) {
          return Math.round(value).toLocaleString(); // コンマ区切りの数値形式にフォーマット
        },
        from: function (value) {
          return Number(value.replace(/,/g, '')); // 数値に変換する際にコンマを削除
        }
      }
    });

slider.noUiSlider.on('update', function (values, handle) {
      valueElement.innerHTML = `つまみの値：${values[handle]}`;
    });