Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

jquery Age Slider Bar

Posted on 2013-10-31
4
Medium Priority
?
1,383 Views
Last Modified: 2013-11-01
I'm trying to style this slider bar to match the image I've attached.  I have it working now but not sure how to add the boxes that float above the slider as in the image.

Here is my current code:
http://jsfiddle.net/gallitin/mRMPv/

Here is the image I need to modify it to function as with the boxes above the slider.
1.jpg
0
Comment
Question by:Nathan Riley
  • 2
4 Comments
 
LVL 25

Assisted Solution

by:Kyle Hamilton
Kyle Hamilton earned 2000 total points
ID: 39615348
http://jsfiddle.net/mRMPv/20/

You'll need to style it to your liking

here's another:
http://jsfiddle.net/mRMPv/26/
0
 
LVL 12

Author Comment

by:Nathan Riley
ID: 39615749
@kozaiwaniec thanks that's exactly what I was looking for.  I'll work with styling it on my own.  I'll take a look at the code you've added and see if I can decipher how it's working for future reference.  Thanks again for the help.
0
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 2000 total points
ID: 39615854
hi guys,

Sorry, I didn't have time to explain earlier.

so basically, I've created two elements with jquery which will contain the values of the left and right of the slider. I gave them class names so they can be styled in CSS outside of the javascript. I could have used one element and one class name, but I left them both in so you can tweak the positions to be centered over the handles individually.

They are then dynamically inserted into each slider handle ( using eq(0) for the first handle, and eq(1) for the second handle - eq is the index of the element in the jquery array of elements). Within the slider options object, I set the text of each new element to the slider values.

One additional piece in the CSS adds the word AGE inside each item - this way AGE will not be replaced by the text of the value. You could have some nested elements with the word AGE, but this is simpler. The only downside would be if you needed to dynamically localize your page, and then it would kind of suck.

Anyway, that's kind of it in a nutshell. if you need/desire further explanation please let me know.

Koza.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Suggested Courses

916 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