JSFiddle - React, Tailwind, and code Playground

by lsubirana

HTML

<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<div id="slider"></div>
<div class="left"><h3>My font color must change depending on slider-ui threshold</h3></div>
<div class="right"><h3>My font color must change depending on slider-ui threshold</h3></div>

CSS

#slider {z-index: 5;background: #666; }
.left, .right {position:absolute; top: 0; left: 0; height: 100vh;overflow:hidden;}

.right {background: #fff;  z-index: -1; width: 100%;}
.left {background: #000; width: 50%; z-index: 1;}

.left h3 {color: white; text-align: center; margin-top: 30px;width:100vw;}
.right h3 {color: black; text-align: center; margin-top: 30px;width:100vw;}

JavaScript

$(document).ready(function() {
      $( "#slider" ).slider({
        max: 101,
        min:1,
        value: 51,
        slide: function(event,ui) { 
          var percentage = (ui.value)-1;
          $('.left').css("width",percentage +'%');
        }
      });
    });