How display field input value as overlay on jquery slider button?

Posted on 2012-09-11
Last Modified: 2012-09-16
I have a jquery slider and want to display the input value on the slider button?

Is this possible?

This is an example of what I have below plus an image showing how it displays on the webpage and how it should display as per the design.

<link href="css/jquery.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="Scripts/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.8.23.custom.min.js"></script>

<div class="formField">
                                    <label for="income" title="Your monthly income">
                                        Your monthly income:</label><div class="formHelp"><img src="images/icon-questionmark.png" width="30" height="30" alt="help" /></div>
                                    <div id="sliderIncome">
                                    <input name="income" type="hidden" id="income" title="Select your approximate monthly income amount using the slider" />

		<script type="text/javascript">
$(function() {
var sliderIncome = $("#sliderIncome");
var IncomeDisplay = $("#sliderIncome > div");
var initialValue = 5000;
var handle = null;

var updateSliderValue = function (event, ui) {
    handle = handle || $(".ui-slider-handle", sliderIncome);
    IncomeDisplay.text(ui.value || initialValue)

    min: 1000, max: 30000,
    slide: updateSliderValue,
    create: updateSliderValue,
    value: initialValue


Open in new window

Here is the relevant CSS

#sliderIncome {
    margin: 30px 20px 0 20px;     

#sliderIncome > div {
    position: relative;

Open in new window

Question by:aliciabutler
    LVL 49

    Accepted Solution

    Firstly let me compliment you on the phrasing of your question - you made it very easy to see what is required.

    With respect to your question. Take a look at the docs for JQueryUI here

    See where they have the bit
      //append icon to handle
      var handleHelper = scrollbar.find( ".ui-slider-handle" )

    Open in new window

    What you dod is the same but you use that to add a span with your text to the slider-handle - in the same way they add the icon - something like this
    scrollbar.find( ".ui-slider-handle" ).append($("<span id="sliderValue">").html(initialValue));

    Open in new window

    On the update slider just set the slider value
      $('#sliderValue').html(newValue); // or .val(newValue) if you used an input

    Open in new window

    Style your span in your css

    Author Comment

    Absolutely brilliant response and works like a dream!!!

    Thank you :)

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Course: HTML5 for Beginning Beginners

    Are you looking for an efficient introduction to HTML5? Have you tried other HTML5 courses and found them too complex? Do you need just the basics of HTML5 to use with Wordpress or other content management system? If you said yes to any of these questions, this course is for you.

    Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
    International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
    In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
    In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at Browse or search based on font properties or name to find a suitable font for…

    760 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    8 Experts available now in Live!

    Get 1:1 Help Now