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

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

<span>Console</span>
<div id="console"></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: [50],
  range: {
    'min': 0,
    'max': 100
  }
});

slider.noUiSlider.on('slide', function (values, handle) {
  valueElement.innerHTML = values[handle];
});

slider.noUiSlider.on('change', function (values, handle) {
  consoleBox.insertAdjacentHTML( 'beforeEnd', `<p style="color: red;">値変更:  ${values[handle]}</p>`);
});

slider.noUiSlider.on('start', function (values, handle) {
  consoleBox.insertAdjacentHTML( 'beforeEnd', `<p style="color: blue;">つまみ掴んだ</p>`);
});

slider.noUiSlider.on('end', function (values, handle) {
  consoleBox.insertAdjacentHTML( 'beforeEnd', `<p style="color: green;">つまみ離した</p>`);
});