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

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

Who is Participating?
Julian HansenCommented:
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
aliciabutlerAuthor Commented:
Absolutely brilliant response and works like a dream!!!

Thank you :)
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.