stepper.html

<script type="text/javascript">
    RED.nodes.registerType('stepper',{
        category: 'function',
        color: '#a6bbcf',
        defaults: {
            name: {value:""},
            steps: {value: 48},
            pin1: {value: 8},
            pin2: {value: 9},
            pin3: {value: 10},
            pin4: {value: 13},
            pin5: {value: 12}
        },
        inputs:1,
        outputs:1,
        icon: "settings.png",
        label: function() {
            return this.name||"stepper";
        }
    });
</script>

<script type="text/x-red" data-template-name="stepper">
    <div class="form-row">
        <label for="node-input-name"><i class="icon-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
    <div class="form-row">
        <label for="node-input-steps"><i class="icon-tag"></i> Steps</label>
        <input type="number" id="node-input-steps" placeholder="Steps">
    </div>
    <div class="form-row">
        <label for="node-input-pin1"><i class="icon-tag"></i> Pin 1</label>
        <input type="number" id="node-input-pin1" placeholder="Pin 1">
    </div>
    <div class="form-row">
        <label for="node-input-pin2"><i class="icon-tag"></i> Pin 2</label>
        <input type="number" id="node-input-pin2" placeholder="Pin 2">
    </div>
    <div class="form-row">
        <label for="node-input-pin3"><i class="icon-tag"></i> Pin 3</label>
        <input type="number" id="node-input-pin3" placeholder="Pin 3">
    </div>
    <div class="form-row">
        <label for="node-input-pin4"><i class="icon-tag"></i> Pin 4</label>
        <input type="number" id="node-input-pin4" placeholder="Pin 4">
    </div>
    <div class="form-row">
        <label for="node-input-pin5"><i class="icon-tag"></i> Pin 5</label>
        <input type="number" id="node-input-pin5" placeholder="Pin 5">
    </div>
</script>

<script type="text/x-red" data-help-name="stepper">
    <p>Mijn simpele stepper node</p>
</script>