JSFiddle - React, Tailwind, and code Playground

by M Shameer

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/start/jquery-ui.css">
<div class="slide" id="slide1"></div>

CSS

.slide {
    margin-top: 80px;
    margin-left: 80px;
    width: 400px;
    background: #ffffff;
    border: 1px solid #000000;
    border-radius: 3px;
}
.slide-back {
    position: absolute;
    height: 100%;
    
}

JavaScript

$(document).ready(function() {
    
    var doUpdate = function(event, ui) {
        $('#slide1 .slide-back').remove();
        $($('#slide1 a').get().reverse()).each(function(i) {
            var bg = '#fff';
            if(i == 1) {
                bg = '#fff';
            } else if(i == 2) {
                bg = '#fff';
            } else if(i == 3) {
                bg = '#fff';
            } else if(i == 4) {
                bg = '#fff';
            }
            
            $('#slide1').append($('<div></div>').addClass('slide-back').width($(this).offset().left - 5).css('background', bg));
        });
    };
    
    $('#slide1').slider({
        slide: doUpdate,
        change: doUpdate,
        min: 0,
        max: 100,
        values: [ 10, 30, 50, 70, 80 ]
    });
    
    doUpdate();
});