While range.js can be used to control the display of lists and nested lists, it fails to cover any deeper level of nested elements. I somewhat expected this, so I will outline a potential fix, assuming I am correct in my assumption of what the issue is.

Theory: In updateList() I am not recursively exploring this target element, rather I am using hardcoded for loops to search, at most, two layers of the element.

Potential Fix: Write a recursive method similar to searchChildren() that will check for child elements, else it will compare the elements data-position to the current range to dictate it's display property. This will prevent placing a limit in the maximum number of nested elements able to be selectively hidden by the associated range input.

So I built in support for nested lists. I use a custom attribute that keeps track of the objective position of each non-UL element within the main UL. This attribute is added during a recursive search of the main UL element in a method called searchChildren().

I also changed updateList() to no longer change the display of any UL element, since that hides all the nested LI elements prematurely. Instead, I compare each LI elements data-position to the current range of the input, and your code will then selectively hide the elements with a higher data-position.

Let me know what you think of the documentation, I can add more if you need. I also think I renamed a few arguments that were accepting event objects but being called "el". This is slightly confusing, so I changed them to "e" for "event".

Issue:

There is a known bug when using the text range on p elements that have various lengths.

For example, p1 has 150 characters, p2 has 50 characters, and p3 has 10 characters. Using the range slider on elements in this context is buggy and causes some text within p elements to not show/hide correctly.

How to view issue:

Simply change the amount of text within various p elements, and use the input slider. Try moving the slider quickly, and slowly to view the text differences.

Possible solutions:

The algorithm in updateInnerText() is not performing quick enough when the range is changed (lines 93-109).

// if less than last paragraph, cut and break
if (cut < paragraphs[numParagraphs - 1]['length']) {
    target.parentNode.children[numParagraphs].innerHTML = paragraphs[numParagraphs - 1]['text'].substring(0, paragraphs[numParagraphs - 1]['length'] - cut);
}
// otherwise backwards loop to remove text in each p
else {
    for (var x = numParagraphs; x > 0; x--) {
        // if less than current p, cut and break
        if (cut < paragraphs[numParagraphs - 1]['length']) {
            target.parentNode.children[x].innerHTML = paragraphs[x - 1]['text'].substring(0, paragraphs[x - 1]['length'] - cut);
            break;
        }
        else {
            // remove this p
            target.parentNode.children[x].innerHTML = paragraphs[x - 1]['text'].substring(0, 0);
            // subtract this p length from cut total
            cut = cut - paragraphs[x - 1]['length'];
        }
    }
}

Do you have a direction you'd like to take the project? In what types of situations do you see the library being used? Are there any features you envision being added?