JSFiddle - React, Tailwind, and code Playground

by cgack

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<body> 
<div data-role="page" id="Page1" data-theme="b" >
   <div role="main" class="ui-content">
      <label for="slider"></label>
      <input type="range" name="slider" id="slider0" class="coloredSlider" value="0" min="0" max="100" data-highlight="true">
  </div>
     </body>
</div>

JavaScript

function getTheColor( colorVal ) {
	var theColor = "";
	if ( colorVal < 50 )
		{
			myRed = 255;
			myGreen = parseInt( ( ( colorVal * 2 ) * 255 ) / 100 );
		}
	else
		{
			myRed = parseInt( ( ( 100 - colorVal ) * 2 ) * 255 / 100 );
			myGreen = 255;
		}
	theColor = "rgb(" + myRed + "," + myGreen + ",0)"; 
	return( theColor ); 
}

$( document ).on( "pageinit", function() {
  $( ".coloredSlider" ).change( function() {
      alert('1');
  sVal = $( this ).val();
		var that = $( this );
		that.parent().parent().children( "div" ).children( "div" ).children( "a" ).css( "background-image", "none" );
		that.parent().parent().children( "div" ).children( "div" ).children( "a" ).css( "box-shadow", "none" );
		that.parent().parent().children( "div" ).children( "div" ).children( "div" ).css( "background-image", "none" );
		if( sVal >= 0 && sVal <= 100 ) {
			myColor = getTheColor( sVal );
			that.parent().children( "input" ).css( "color", myColor );
			that.parent().parent().children( "div" ).children( "div" ).children( "a" ).css( "background-color", myColor );
			that.parent().parent().children( "div" ).children( "div" ).children( "div" ).css( "background-color", myColor );
  }
 });
});