JSFiddle - React, Tailwind, and code Playground

by tjerabek

HTML

<div class="demo">

    
    <div id="presentation">
        
    </div>
    
<div id="slider"></div>

    <p>Value: <span id="show"></span></p>
    
</div>

CSS

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#presentation{
    height: 150px;
    background: #AAAAAA;
}
#presentation.slide1{
    background: #BBB;
}
#presentation.slide2{
    background: #CCC;
}
#presentation.slide3{
    background: #DDD;
}
#presentation.slide4{
    background: #EEE;
}
.demo{
    padding: 50px;
}
.ui-slider{
    height: 24px;
    background: gray;
    border: 2px solid gray;
}
.ui-slider-handle{
    width: 20px;
    height: 20px;
    background-color: white;
    display: block;
    position: relative;
    outline: none;
}

JavaScript

$(function() {
    $("#slider").slider();

    $("#slider").bind("slide", function(event, ui) {
        $('#show').text(ui.value);

        $('#presentation').removeClass(function(index, css) {
            return (css.match(/\bslide\S+/g) || []).join(' ');
        })

        $('#presentation').addClass('slide' + ui.value);
    });
});