Make Your Microsoft Dynamics Investment Count & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.
Course Of The Month
Become a Premium Member and unlock a new, free course in leading technologies each month.
Solved
jquery Age Slider Bar
Posted on 2013-10-31
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
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
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
2
4 Comments
http://jsfiddle.net/mRMPv/20/
You'll need to style it to your liking
here's another:
http://jsfiddle.net/mRMPv/26/
You'll need to style it to your liking
here's another:
http://jsfiddle.net/mRMPv/26/
Active today
@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.
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.
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.
Featured Post
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how add a scalable full-width header using CSS3.
Create a new HTML document with an internal stylesheet. Set a tiled background.: Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn how to dynamically set the form action using jQuery.
Suggested Courses
Earn Certification
HTML5 Specialist - Certification
Free withPremium
Course of the Month7 days, 2 hours left to enroll
622 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.