JSFiddle - React, Tailwind, and code Playground

by ryanbrill

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: 20px;
    margin-left: 20px;
    width: 400px;
    background: red;
}
.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 = '#00f';
            } else if(i == 2) {
                bg = '#0f0';
            } else if(i == 3) {
                bg = '#f00';
            } else if(i == 4) {
                bg = '#0ff';
            }
            
            $('#slide1').append($('<div></div>').addClass('slide-back').width($(this).offset().left - 5).css('background', bg));
        });
    };
    
    $('#slide1').slider({
        range: true,
        slide: doUpdate,
        change: doUpdate,
        min: 0,
        max: 100,
        values: [ 10, 30 ]
    });
    
    doUpdate();
});