Golf Ball Flight

HTML

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
<p id="distance" class="ui-state-default ui-corner-all ui-helper-clearfix">Distance</p>
<div id="green" class="slider"></div>

<p id="height" class="ui-state-default ui-corner-all ui-helper-clearfix">Height</p>
<div id="blue" class="slider"></div>

SCSS

svg{background:whitesmoke}
body{width:720px;padding:20px}
#distance{margin-top:500px}
p{padding:4px 0 4px 8px}
.slider{margin:10px 0 20px}
#green .ui-slider-range{background:#8ae234}
#green .ui-slider-handle{border-color:#8ae234}
#blue .ui-slider-range{background:#729fcf}
#blue .ui-slider-handle{border-color:#729fcf}

JavaScript

// Creates a canvas 720 Ă— 480 at 20, 20
var paper = Raphael(20, 20, 720, 480);

function drawFlightProfile(options) {
  var d = options.distance,
      h = options.height * d,
      pw = paper.width,
      ph = paper.height,
      p = paper.path('M' + (30/480)*ph + ' ' + (450/480)*ph + 'c' + (350/pw)*pw*d + ',' + (-60/ph)*ph*h + ' ' + (450/pw)*pw*d + ',' + (-480/ph)*ph*h + ' ' + (650/pw)*pw*d + ',0');
  p.attr('stroke', options.color);
  p.attr('stroke-width', 5);
  p.attr('stroke-linecap', 'round');
}

function drawFlightPOV(options) {
         
}

drawFlightProfile({color: '#ef2929', distance: .8, height: .8});

$(function() {
    $('#green, #blue').slider({
        orientation: 'horizontal',
        range: 'min',
        max: 255,
        value: 127
    });
    $('#green').slider('value', 140);
    $('#blue').slider('value', 60);
});