Moving from APEX to JScript and SLDS... lots to learn! 
I was trying to use the SLDS Advanced style given here: https://www.lightningdesignsystem.com/components/data-tables to build a datatable with resizable columns. Problem is I can't figure out how to attach the event supposed to actually resize the table columns.

My component is supposed to display a table header using aura iteration:
.....
<aura:if isTrue="{! v.fieldDef.visible }">
    <th aria-sort="none" class="slds-is-sortable slds-is-resizable slds-text-title_caps" scope="col" aria-label="{! v.fieldDef.title }" data-field="{! v.fieldDef.field}" >
        <aura:if isTrue="{! v.fieldDef.sortable }">
            <a ///the part that deals with sorting arrows
            </a>
        </aura:if>
        <span class="slds-assistive-text" aria-live="assertive" aria-atomic="true">Sorted none</span>
        <div class="slds-resizable">
                    <input type="range" min="20" max="1000" aria-label="{! v.fieldDef.title + ' column width'}" 
                           onchange="{! c.resizehandler}" tabindex="-1" aura:id = "{! v.fieldDef.title + '-handler'}" 
                           class="slds-resizable__input" />
                    <span class="slds-resizable__handle">
                        <span class="slds-resizable__divider"></span>
                    </span>
            </div>
    </th>    
    </aura:if>
....
If <input type="range"..> element is written as above than a "standard" slider shows up and the "resizehandler" is called (no idea yet how to change th width). If the <input range> styling adds to styling class "slds-assistive-text" only the <span> slds-resizable__divider shows up (nothing from <input>) but trying to move the handler doesn't fire any event, nor has any effect on column size.
Can someone please tell me more on how this style is supposed to be used and which event can be used (attached to which element) to get the column resized.
Also how can the divider be limited to the table height. Thank you in advance for the answers.