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.
Here is the relevant CSS
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
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>
Here is the relevant CSS
#sliderIncome {
margin: 30px 20px 0 20px;
}
#sliderIncome > div {
margin-top:-25px;
position: relative;
}
How-it-should-display--as-per-de.jpgHow-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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thank you :)