From my research from other questions at the following underneath:

Jquery UI slider how to make a box follow the handler?

I managed to create a simple one in JsFiddle shown here:

http://jsfiddle.net/mvnvu5qq/1/ - I would like to expand this code so that it resembles the slider on the website above.

I used this code as an example:

JavaScript:

 jQuery.noConflict(); jQuery(document).ready(function () { jQuery("#slider").slider({ value: '', min: 0, max: 150, step: 1, range: 'min' }); var thumb = jQuery(jQuery('#slider').children('.ui-slider-handle')); setLabelPosition(); jQuery('#slider').bind('slide', function () { jQuery('#sliderValue').val(jQuery('#slider').slider('value')); setLabelPosition(); }); function setLabelPosition() { var label = jQuery('#sliderValue'); // label.css('top', thumb.offset().top + label.outerHeight(true)); label.css('left', thumb.position().left - (label.width() / 2)); } });

HTML

<div id="container"> <div id="slider"></div> <input id="sliderValue" /> </div>

CSS

#container { width:300px; position:relative; margin:0 auto; } #sliderValue { position:absolute; bottom: 20px; width: 30px; padding: 0px; list-style-type: none; list-style: disc; } #slider { margin-top: 10%; }

I am not very good at this so any help or information will do as I learn something new everyday.