How to make a slider based on Input type Range (Using HTML5 input)?

Question

I have a code <input id="freq" type="range" min="1" max="20000"> The form type is Range (input type="range"). How to style a range slider using NouiSlider? This slider changes the frequency of the signal. My code works but nothing happens when the slider is moved. If you do not connect to the input "NouiSlider" - then everything works fine.

var sliderFreq = document.getElementById('sliderFreq');
noUiSlider.create(sliderFreq, {
  start: 10000,
  step: 1,
  connect: 'lower',
  range: {
    'min': 1,
    'max': 20000
  },
  format: wNumb({
    decimals: 0
  })
});

var freqInput = document.getElementById('freq');
sliderFreq.noUiSlider.on('update', function(values, handle) {
  var freqValue = values[handle];
  freqInput.value = freqValue;
});
freqInput.addEventListener('change', function() {
  sliderFreq.noUiSlider.set([this.value]);
});

<input id="freq" type="range" min="1" max="20000">
<div id="sliderFreq"></div>