Link to home
Start Free TrialLog in
Avatar of aliciabutler
aliciabutler

asked on

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
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of aliciabutler
aliciabutler

ASKER

Absolutely brilliant response and works like a dream!!!

Thank you :)