Slider Increase Decrease

by James Doyle

HTML

<input type="range" name="text_widget_count" value="1" min="1" max="4" /><span id="text_widget_count">1</span>
<div id="result">
    <div class="widget_form"><label>Widget Title 1</label><input type="text" name="text_widget[1]name" /></div>
</div>

CSS

.widget_form {
    margin: 10px 0;
}

JavaScript

oldval = 1;
$('input[type="range"]').on('change', function() {
    var newval = $(this).attr('value');
    var direction = (newval > oldval) ? 'increasing' : 'decreasing';
    var item = '#' + $(this).attr('name');
    if (direction == 'increasing') {
        $(item).html(newval);
        var template = build_template(newval);
        $('#result').html(template);
    } else {
        var target = $('.widget_form')[newval];
        $(item).html(newval);
        $(target).remove();
    }
    oldval = newval;
});

function build_template(num) {
    var template = $('#result').html()+'<div class="widget_form"><label>Widget Title '+num+'</label><input type="text" name="text_widget['+num+']name" /></div>';
    return template;
}