JSFiddle - React, Tailwind, and code Playground

JavaScript

function f1(args) {
    this.defaults = {
        param1: 100,
        param2: 900
    }
    this.ranges = {
        param1: {
            min: 0,
            max: 500
        },
        param2: {
            min: 0,
            max: 1000
        }
    }
    this.steps = {
        param1: 50,
        param2: 100
    }
}


var myF1 = new f1();
var elements = [];

for (var param in myF1.ranges) {
    var input = document.createElement('input');
    input.type = 'range';
    input.name = param;
    input.min = myF1.ranges[param].min;
    input.max = myF1.ranges[param].max;
    input.step = myF1.steps[param];
    input.value = myF1.defaults[param];

    var span = document.createElement('span');
    span.appendChild(document.createTextNode(param + ': '));
    span.appendChild(input);
    elements.push(span);
}

elements.forEach(function(element) {
    document.body.appendChild(element);
});