JQueryUI Slider – Tooltip for the Current Position

Please take note this tutorial is intended for intermediate levels of experience. Having said that, It’s still relatively easy to follow, so long as you are fairly familiar with CSS and jQuery.

Let’s get started.

Step 1: The JQuery UI
We obviously need the jQuery and the jQuery UI Library,

//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js 
//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js

Step 2: HTML Markup
The markup for the slider is very simple

div id='slider

Step 3: Install The Slider UI
The snippet below will install the Slider on the page, but it applies only the default configuration.

var initialValue = 2012;

var sliderTooltip = function(event, ui) {
    var curValue = ui.value || initialValue;
    var target = ui.handle || $('.ui-slider-handle');                                     
    var tooltip = '
' + curValue + '
';
   $(target).html(tooltip);
}

$("#slider").slider({
    value: initialValue,
    min: 1955,
    max: 2015,
    step: 1,
    create: sliderTooltip,
    slide: sliderTooltip
});

Step 4: The Styles
Now let’s begin adding the styles.

body {
    margin:50px;
}
.tooltip {
    position: absolute;
    z-index: 1020;
    display: block;
    padding: 5px;
    font-size: 11px;
    visibility: visible;
    margin-top: -2px;
    bottom:120%;
    margin-left: -2em;
}

.tooltip .tooltip-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    border-top: 5px solid #000000;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    position: absolute;
    width: 0;
    height: 0;
}

.tooltip-inner {
    max-width: 200px;
    padding: 3px 8px;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    background-color: #000000;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}

.ui-slider {
    background: black repeat-x bottom left;
    border-bottom: 1px solid #EBEAE5;
    height: 15px;
    margin: 0;
    padding: 0px;
}

.ui-slider-handle {
    background: #ED6B51;
    border-bottom: 1px solid #a8a79f;
    border-right: 1px solid #a8a79f;
    height: 20px;
    width: 10px;
    margin: 0;
    padding: 0px;
    display: inline-block;
}

.ui-slider-range {
    height: 10px;
    border-bottom: 3px solid red;
    position: relative;
}

.ui-slider-handle {
    background: #ED6B51 !important;
    border-bottom: 1px solid #a8a79f !important;
    border-right: 1px solid #a8a79f !important;
    height: 20px !important;
    width: 10px !important;
    margin: 0 !important;
    padding: 0px !important;
    display: inline-block !important;
    top: -4px !important;
}

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.