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"></div>
<div class="right"></div>
<div class="main-content">
  <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: 50vh;}
.left {background: #000; width: 50%; z-index: 1;}
.right {background: #fff;  z-index: -1; width: 100%;}
.main-content {z-index: 3; position: absolute; top: 0; left: 0; width: 100%;}
h3 {color: blue; text-align: center; margin-top: 30px;}

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 +'%');
          $('h3').css('color', rgb(percentage));
        }
      });
    });
    function rgb(p){
        var frequency = .08;
        
           r = Math.sin(frequency*p + 0) * 127 + 128;
           g = Math.sin(frequency*p + 2) * 127 + 128;
           b = Math.sin(frequency*p + 4) * 127 + 128;
        
         return  'rgb(' + Math.round(r) + ',' + Math.round(g) + ',' + Math.round(b) + ')';
    }