Heat Map with Controls

by Ron Eaglin

HTML

<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http:////code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<label for="amount">Maximum Velocity:</label>
<input type="text" id="velocity" style="border:0; color:#f6931f; font-weight:bold;" /><br/><br/>
<div id="slider-range-velocity"></div>
    <br/>
<label for="amount">Wind Direction:</label>
    <input type="text" id="angle" style="border:0; color:#f6931f; font-weight:bold;" /><br/><br/>
<div id="slider-range-angle"></div>

JavaScript

$(function() {
$( "#slider-range-velocity" ).slider({
range: "min",
value: 37,
min: 1,
max: 200,
slide: function( event, ui ) {
$( "#velocity" ).val( ui.value );
}
});
$( "#slider-range-angle" ).slider({
range: "min",
value: 0,
min: 0,
max: 360,
slide: function( event, ui ) {
$( "#angle" ).val( ui.value );
}
});  
     
     
$( "#velocity" ).val(  $( "#slider-range-velocity" ).slider( "value" ) );
$( "#angle" ).val(  $( "#slider-range-angle" ).slider( "value" ) );

 });