JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css">
<div id="eq" class="line">
    <span id="l1" style="padding: 0 1.8em;">0</span>
    <span id="l2" style="padding: 0 1.8em;">0</span>
    <span id="l3" style="padding: 0 1.8em;">0</span>
    <span id="l4" style="padding: 0 1.8em;">0</span>
    <span id="l5" style="padding: 0 1.8em;">0</span>
    <span id="l6" style="padding: 0 1.8em;">0</span>
    <span id="l7" style="padding: 0 1.8em;">0</span>
    <span id="l8" style="padding: 0 1.8em;">0</span>
</div>

CSS

#eq > span { display: block; margin: 10px 0; }

JavaScript

$("#eq > span").each(function (e) {
    // read initial values from markup and remove that
    var value = parseInt($(this).text());
    // var index = $(this).index; <- this didn't work.

    $(this).empty();
    $(this).slider({
        value: value,
        min: -10,
        max: 10,
        slide: function (event, ui) {
            console.log($(this).attr('id')); //<- neither did this.
            console.log($(this).index());
            //console.log(index);
            //$('#left-values span:first').text(ui.value);
        }
    });
});