JSFiddle - React, Tailwind, and code Playground

HTML

<section>
    <div>
        <h4>Div 1</h4>
        <input type="text"></input>       
     <button>Submit</button>
    </div>
    <div>
         <h4>Div 2</h4>
    </div>
    <div>
        <h4>Div 3</h4>
        <ul id="list">
            <li>list</li>
        </ul>
    </div>
</section>

















<span class="sliderContainer">
<span id="slider" class="slider">
    <span class="handle"></span>
</span>
<p>0 &lt;- number of li -&gt; 10</p>
</span>

CSS

section {
    width: 100%;
    display: table;
    border: 3px solid #ccc
}
div {
    width: 33%;
    min-height: 100%;
    display: table-cell
}
div:not(:last-child) {
    border-right: 2px solid #aaa;
    text-align: center
}
div:nth-child(2) {
    background: #eee;
}
h4 {
    text-align: center
}
input {
    width: 70%;
}



















span {
    display: block
}
.sliderContainer {
    position: fixed;
    left: 0;
    bottom: 1em;
    text-align: center;
}
.slider {
    background: #CCC;
    height: 16px;
    width: 200px;
}
.slider .handle {
    border-radius: 1em;
    background: #000;
    width: 16px;
    height: 16px;
}

JavaScript

window.addEvent('domready', function () {
    var slider = $('slider'),
        li = '<li>list</li>',
        list = $('list');

    new Slider(slider, slider.getElement('.handle'), {
        range: [0, 10],
        initialStep: 2,
        onChange: function (value) {
            list.innerHTML = Array(value).join('<li>list</li>');
        }
    });
});