Layout

When fully rendered, the instance will be laid out in the following ways:

Single Layout

<div class="rangeable-container has-tooltip show-tooltip"> <!-- CONTAINER -->
    <input class="rangeable-input" type="range"> <!-- INPUT -->
    <div class="rangeable-track"> <!-- TRACK -->
        <div class="rangeable-progress"> <!-- PROGRESS -->
            <div class="rangeable-handle"> <!-- HANDLE -->
                <div class="rangeable-tooltip"></div> <!-- TOOLTIP -->
            </div>
        </div>
    </div>
</div>

Double Layout

<div class="rangeable-container has-tooltip show-tooltip"> <!-- CONTAINER -->
    <input class="rangeable-input" type="range"> <!-- INPUT -->
    <div class="rangeable-track"> <!-- TRACK -->
        <div class="rangeable-progress"> <!-- PROGRESS -->
            <div class="rangeable-handle"> <!-- HANDLE 1 -->
                <div class="rangeable-tooltip"></div> <!-- TOOLTIP 1 -->
            </div>
            <div class="rangeable-handle"> <!-- HANDLE 2 -->
                <div class="rangeable-tooltip"></div> <!-- TOOLTIP 2 -->
            </div>
            <div class="rangeable-tooltip"></div> <!-- TOOLTIP 3 -->
        </div>
    </div>
</div>

The extra tooltip in the double layout is used to display the values when the two single tooltips collide.

If required, you can grab a reference to these nodes quickly by utilising the nodes property.