jQuery Slider

HTML

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<h4>
Slider Example
</h4>
<div id="slider"></div>
<input id="value" value="50" />
<input id="hex" value="?" />
<input id="green" value="?" />
<input id="red" value="?" />

CSS

input { display: block; }
#slider {
  width: 300px;
  margin: 15px;
}
#slider, #slider .ui-slider-range-min { background: yellow; }
#slider .ui-slider-handle { 
  background: yellow;
  text-align: center;
  padding: 4px;
  font-size: 12px;
}

JavaScript

$("#slider").slider({
  orientation: "horizontal",
  range: "min",
  max: 100,
  min: 0,
  value: 50,
  slide: refreshValue,
  change: refreshValue
});
$('input#value').on('change', function() {
  var value = $('input#value').val();
  console.debug(value);
  if ( value != '' ) {
    $('#slider').slider( "value", value ); 
  }
});

$("#slider").slider("value", 50);

function hexFromRGB(r, g, b) {
  var hex = [
    r.toString( 16 ),
    g.toString( 16 ),
    b.toString( 16 )
  ];
  $.each( hex, function( nr, val ) {
    if ( val.length === 1 ) {
      hex[ nr ] = "0" + val;
    }
  });
  return hex.join( "" ).toUpperCase();
}

function refreshValue() {
  var red = 255;
  var green = 255;
  var blue = 0;
  
  var sliderValue  = $( "#slider" ).slider( "value" );
  
  if ( sliderValue < 50 ) {
    green = Math.round(green - (255 * (50 - sliderValue) * 2 / 100));   
  }
  else if ( sliderValue > 50 ) {
    red = Math.round(red - (255 * (sliderValue - 50) * 2 / 100));
  }
  
  var hex = hexFromRGB(red, green, blue);

  $( "#slider .ui-slider-range-min" ).css( "background", "#" + hex );
  $( "#slider" ).css( "background", "#" + hex );
  $( "#slider .ui-slider-handle" ).css( "background", "#" + hex );
  $( "#slider .ui-slider-handle" ).text(sliderValue);
  $( "#value" ).val(sliderValue);
  $( "#hex" ).css( "background-color", "#" + hex );
  $( "#hex" ).val("#" + hex);
  $( "#green" ).val(green);
  $( "#red" ).val(red);
}