[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

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

Posted on 2012-09-11
2
Medium Priority
?
661 Views
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>

<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
0
Comment
Question by:aliciabutler
2 Comments
 
LVL 60

Accepted Solution

by:
Julian Hansen earned 2000 total points
ID: 38389747
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
 

Author Comment

by:aliciabutler
ID: 38403717
Absolutely brilliant response and works like a dream!!!

Thank you :)
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

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.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses

829 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