JnBrymn/index.html

## index.html
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Slider - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  var colors = function(num) {
    var min = 0; //change these
    var max = 100; //change these

    var tohex = function(num) {
      num = Math.floor(255*num);
      return ('00' + num.toString(16)).substr(-2);
    }

    var warp = function(num) {
      var lowest = 0;
      var highest = 1;
      var middle = 0.5;

      var a = 2*highest + 2*lowest +4*middle;
      var b = -highest - 3*lowest -4*middle;
      var c = lowest;
      return a*num*num + b*num + c;
    }

    var green_val = (num-min)/(max-min);
    console.log('green_val');
    var red_val = 1-green_val;
    return "#"+tohex(warp(red_val))+tohex(warp(green_val))+"00";
  };


  $(function() {
    $( "#slider" ).slider(
    {
      min: 0,
      max: 100,
      slide: function( event, ui ) {
        $("#color").css("background-color",colors(ui.value));
      }
    }
    )
  });
  </script>
  <style>
    #slider {width: 300px}
    #color {width:300px;height:300px}
  </style>
</head>
<body>
 <h1>Slide the friggin' slider!</h1>
<div id="slider"></div>
<div id="color"> </div>


</body>
</html>
	<!doctype html>

	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>jQuery UI Slider - Default functionality</title>
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
	<link rel="stylesheet" href="/resources/demos/style.css" />
	<script>
	var colors = function(num) {
	var min = 0; //change these
	var max = 100; //change these

	var tohex = function(num) {
	num = Math.floor(255*num);
	return ('00' + num.toString(16)).substr(-2);
	}

	var warp = function(num) {
	var lowest = 0;
	var highest = 1;
	var middle = 0.5;

	var a = 2highest + 2lowest +4*middle;
	var b = -highest - 3lowest -4middle;
	var c = lowest;
	return anumnum + b*num + c;
	}

	var green_val = (num-min)/(max-min);
	console.log('green_val');
	var red_val = 1-green_val;
	return "#"+tohex(warp(red_val))+tohex(warp(green_val))+"00";
	};



	$(function() {
	$( "#slider" ).slider(
	{
	min: 0,
	max: 100,
	slide: function( event, ui ) {
	$("#color").css("background-color",colors(ui.value));
	}
	}
	)
	});
	</script>
	<style>
	#slider {width: 300px}
	#color {width:300px;height:300px}
	</style>
	</head>
	<body>
	<h1>Slide the friggin' slider!</h1>
	<div id="slider"></div>
	<div id="color"> </div>


	</body>
	</html>