type-tester-tutorial-part-2.js

// Add units to a number
function addUnits(n, unitsFormat) {
  return unitsFormat.replace('{}',n);
}

// Slider slide event
function slide(event, samp) {

  // Apply style to samp
  samp.style[event.srcElement.dataset.prop] = addUnits(event.srcElement.value, event.srcElement.dataset.units);

  // Update other controls that control the same property (i.e. slider and number input)
  event.srcElement.parentElement.querySelectorAll(
    `input[data-prop=${event.srcElement.dataset.prop}`
  ).forEach( (input) => {
    input.value = event.srcElement.value;
  });
}

// Activate the event listener and dispatch it once to sync up the UI controls
sliders.size.addEventListener('input', (event) => slide(event,samp));
sliders.size.dispatchEvent(new Event('input'));