I’ve been able to style it flawlessly but getting it to stay within it’s container has been a challenge. The margin-left fix doesn’t seem to work for me.
Here’s a jsfiddle: http://jsfiddle.net/Erugp/
Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
The issue is that jquery UI slider uses the left CSS property with relative values to animate the slider. This means that it will slide the left edge of the handle from the left edge of the slider all the way to the other side’s edge, overflowing.
One solution is to make the slider div smaller and wrap it with another div which holds the styling. The outer div width = slider width + handle div.
After a little fiddling with the css sizes and margins it worked for me.