JSFiddle - React, Tailwind, and code Playground

HTML

<div id="imageslider1" class="slider">
    <div class="knob"></div>
</div> 

<div id="servers1" class="servers">
     <div class="server"></div>
     <div class="server"></div>      
     <div class="server"></div>
     <div class="server"></div> 
     <div class="server"></div> 
</div>

<div id="resources1" class="slider-fields">
    <div class="specs">
        <div class="slider-field">
        <span>Dedicated CPU</span>
        1.2GHz
        </div>
        <div class="slider-field">
        <span>Dedicated RAM</span>
        376MB
        </div>
        <div class="slider-field">
        <span>Disk space</span>
        10GB
        </div>
        <div class="slider-field">
        <span>Bandwidth</span>
        1TB
        </div>
        <div class="slider-field">
        <span>Monthly Price</span>
        $19.00
        </div></div>
    <div id="resources2" class="specs">
        <div class="slider-field">
        <span>Dedicated CPU</span>
        2.4GHz
        </div>
        <div class="slider-field">
        <span>Dedicated RAM</span>
        752MB
        </div>
        <div class="slider-field">
        <span>Disk space</span>
        20GB
        </div>
        <div class="slider-field">
        <span>Bandwidth</span>
        2TB
        </div>
        <div class="slider-field">
        <span>Monthly Price</span>
        $36.00
        </div>
    </div>
</div>

CSS

.slider {
    clear: left;
    background: #CCC;
    height: 16px;
    width: 400px;
    margin: 0 30px;
 }
    .slider .knob {
        background: #000;
        width: 16px;
        height: 16px;
    }

.servers { 
    margin: 30px 30px 100px 30px;
    width: 800px;
}

.servers .server { 
    background: url("http://www.eleven2.com/images/cloud/server1.png") transparent;
    float: left;
    height: 45px;
    width: 80px;
} 
.servers .server.on ~ .server:not(.on) { 
    background: url("http://www.eleven2.com/images/cloud/server0.png") transparent;
}

.slider-field {
    color: #222222;
    float: left;
    font-size: 26px;
    padding: 5px;
    text-align: center;
    width: 117px;
}

.slider-field span {
    display: block;
    font-size: 11px;
    font-weight: normal;
    padding-bottom: 2px;
    text-transform: uppercase;
}

#resources1 .specs {
    position: absolute;
}

.slider-fields .specs.off {
    visibility: hidden;
}

JavaScript

/* enable/disable method */

var imageSlider1 = document.id('imageslider1');
var imageSliderKnob1 = imageSlider1.getElement('.knob');
var slideableImages1 = document.id('servers1').getElements('.server');    
    new Slider(imageSlider1, imageSliderKnob1, {
        steps: slideableImages1.length - 1, // step 0 = zeroth element
        offset: -30, // center over image
        onChange : function(value) {
            slideableImages1.removeClass('on'); // clear classes
            slideableImages1[this.step].addClass('on'); // reset to current element
        }
        //, snap: true // snap to nearest if desired
    });