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>

<form>
<fieldset>
<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">
        <div></div>
 </div>
                                    <input name="income" type="hidden" id="income" title="Select your approximate monthly income amount using the slider" />
                                    
                                   
                                </div>
                            </fieldset>
                            </form>

		<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)
              .css(handle.position());
};

sliderIncome.slider({
    min: 1000, max: 30000,
    slide: updateSliderValue,
    create: updateSliderValue,
    value: initialValue
});
		   });

</script>

Open in new window


Here is the relevant CSS

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

#sliderIncome > div {
    margin-top:-25px;
    position: relative;
}

Open in new window

How-it-should-display--as-per-de.jpg
How-it-displays-on-webpage.JPG
jquery.css
jquery-1.8.0.min.js
jquery-ui-1.8.23.custom.min.js
icon-questionmark.png
aliciabutlerAsked:
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

http://jqueryui.com/demos/slider/#side-scroll

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
0
 
aliciabutlerAuthor Commented:
Absolutely brilliant response and works like a dream!!!

Thank you :)
0
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.