/**
 * для вопроса https://qna.habr.com/q/1064576
 * Как заменить шесть «function» на одну?
 */
const tmpl = `
<div>
  <span class="p_name"></span>
  <span class="p_value"></span>
</div>
<input type="range" min="" max="" value="">
`;

const data = [
  {title: 'Strength', min: 0, max: 1000, value: 340},
  {title: 'Agility', min: 100, max: 1000, value: 760},
  {title: 'Intellect', min: 0, max: 1000, value: 460},
  {title: 'Stamina', min: 0, max: 1000, value: 340},
  {title: 'Stealth', min: 0, max: 1000, value: 1000},
  {title: 'Sapience', min: 0, max: 1000, value: 1000},
];

data.forEach((p) => {
  const div = document.createElement("div");
  div.innerHTML = tmpl;
  
  p.el = {};
  
  div.querySelector(".p_name").textContent = p.title;
  p.el.value = div.querySelector(".p_value");
  p.el.value.textContent = p.value;
  
  p.el.slider = div.querySelector('input');
  p.el.slider.min = p.min;
  p.el.slider.max = p.max;
  p.el.slider.value = p.value;
  
  p.el.slider.addEventListener("input", () => {
    p.value = p.el.slider.value;
    p.el.value.textContent = p.value;
  })
  
  document.body.insertAdjacentElement("beforeend", div.querySelector("div"));
  document.body.insertAdjacentElement("beforeend", p.el.slider);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.