I'm encountering an issue with the new design of my website, which involves using jQuery and jQueryUI (specifically SliderUi) along with some css manipulation.
Whenever I slide the #slider, the width of .left is updated based on (ui.value from 1-100 + '%'), triggering a slide and background transition. My question is whether it's possible to change the color of text based on the slider's threshold or value. If so, can you provide suggestions on how to achieve this? See snippet below. Thank you in advance!
$(document).ready(function() {
$( "#slider" ).slider({
max: 101,
min:1,
value: 51,
slide: function(event,ui) {
var percentage = (ui.value)-1;
$('.left').css("width",percentage +'%');
}
});
});#slider {z-index: 5;background: #666; }
.left, .right {position:absolute; top: 0; left: 0; height: 100vh;}
.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;}<link href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<div id="slider"></div>
<div class="left"></div>
<div class="right"></div>
<div class="main-content">
<h3>Certain parts of my font should change color based on the slider-ui threshold</h3>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>