Slider UI

HTML

<div id="slider"></div>
<div id="slider-range"></div>
<input id="amount" value="">

CSS

#slider label {
    position: absolute;
    width: 20px;
    margin-left: -10px;
    text-align: center;
    margin-top: 20px;
}
#slider {
    width: 50%;
    margin: 2em auto;
}

JavaScript

$( "#slider" ).slider({
    min: 1,
    max: 5,
    step: 1,
    value: 3,
    range: "min",
    animate: "fast",
})
.each(function() {
  var opt = $(this).data().uiSlider.options;
  var vals = opt.max - opt.min;
  for (var i = 0; i <= vals; i++) {
    var el = $('<label>'+(i+1)+'</label>').css('left',(i/vals*100)+'%');  
    $( "#slider" ).append(el);
  }
});
$( "#slider-range" ).slider({
	range: true,
	min: 0,
	max: 500,
    step: 50,
	values: [ 75, 300 ],
	slide: function( event, ui ) {
		$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
	}
});