show/hide li element recursively based on input slider

Question

I'm trying to show/hide an x number of li elements based on an input slider. I'm trying to do this with an algorithm that loops through the amount of li elements, and then recursively loops through the amount of differences based on the input slider.

This is what I currently have:

/*  updateList
*   @param the event elemenet (input range)
*   @param range value, number of words to display
*/
function updateList(el, range) {
    var originalList = el.srcElement.nextSibling.nextElementSibling.getAttribute("data-value");
    var diff = originalList - range;
    var ul = el.srcElement.parentNode.children[1];

    // for amount of differences
    for (var li = originalList; li > -1; li--) {
        for (var y = 0; y < diff; y++) {
            ul.children[li].style.display = "none";
        }
    }
}

Here is a JSbin . Any help or advice is appreciated.

Answer 1

Just change your code

// for amount of differences
for (var li = originalList; li > -1; li--) {
    for (var y = 0; y < diff; y++) {
        ul.children[li].style.display = "none";
    }
}

to this

// for amount of differences
for (var i=0; i<originalList; i++) {
    ul.children[i].style.display = (i<range) ? "":"none";
}

Have a look at this PEN to see it in action.

Answer 2

i just modify two function as bellow

function eventListener(el) {
  el.addEventListener('change', function(e) {
      updateList(e.target, el.value);
  });
}

and

function updateList(el, range) {
    var ul = el.nextSibling.nextElementSibling;
    var ul_num = ul.getAttribute("data-value");

    for (var i = 0; i < ul_num; i++) {
        ul.children[i].style.display = "block";
        if ( i+1 > range) {
            ul.children[i].style.display = "none";
        }
    };
}

jsFiddle