Jquery horizontal bar with arrow

Can anyone suggest me some jquery tutorial or a demo开发者_如何学C where something like the below figure has been made

The arrow would point to some result value which would be between a and d. Is there any other method to do this else jquery. Using google chart api can i get the arrow somehow??

you can use jquery-ui slider then just modify in css for add the arrow

find the .ui-slider-handle in jquery-ui's css and make moddified or add for margin-top and background image

before:

.ui-slider .ui-slider-handle 
{ 
  position: absolute; 
  z-index: 2; 
  width: 1.2em; 
  height: 1.2em; 
  cursor: default; 
}

change to:

.ui-slider .ui-slider-handle 
{
  margin-top:-20px; 
  background-image:url(ArrowDown.png);
  position: absolute; 
  z-index: 2; 
  width: 1.2em; 
  height: 1.2em; 
  cursor: default; 
}

in the main page just add the Script for slider:

$(function() {
    $( "#slider" ).slider({
        value:100,
        min: 0,
        max: 500,
        step: 50,
        slide: function( event, ui ) {
            $( "#amount" ).val( "$" + ui.value );
        }
    });
    $( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
});

and the HTML:

<p>
    <label for="amount">Donation amount ($50 increments):</label>
    <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>

<div id="slider"></div>

i use the jquery 1.5.1 and jquery-ui 1.8.12 also and it's works, (dont forget to call the jquery.js, jquery-ui.js and jquery-ui.css)