Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Labels above and below slider #77

Closed
YiuriV opened this issue Oct 26, 2015 · 4 comments
Closed

Labels above and below slider #77

YiuriV opened this issue Oct 26, 2015 · 4 comments

Comments

@YiuriV
Copy link

@YiuriV YiuriV commented Oct 26, 2015

Hello, I need to create a slider with labels above and below the slider. At the moment I have this code:

var dates = ["1637", "1756", "1777", "1846", "1855", "1865", "1912", "1973", "1979", "2013", "2015"];
$(".tinkerslider")
.slider({
min: 0,
max: dates.length-1,
value: 3
})
.slider("pips", {
rest:"label",
labels: dates
})
.slider("float", {
pips:false,
labels: [ "Sanderus-Hondius", "Malfeson", "Ferraris", "VDM", "Gerard", "Popp", "Compijn & Soenen", "MOW", "Foto", "Foto", "GRB" ]
});

However, I need to create a slider as the one in the attached image. Right now I have the dates below the slider and the labels with names as a popup when I click on the right year, but as you can see I need those names to be fixed above the slider. Any idea how I can achieve this?

Thanks alot, Julie

slider

@simeydotme
Copy link
Owner

@simeydotme simeydotme commented Oct 30, 2015

Hi, Julie :)
If you set "pips" to true on the float method, you could then use CSS to show the floats permanently and position them above the slider :) .. If you havent figured it out before I get back to Hong Kong (im on holiday) then I'll give you a proper example 😁

@simeydotme
Copy link
Owner

@simeydotme simeydotme commented Nov 16, 2015

@simeydotme simeydotme closed this Nov 16, 2015
@simeydotme simeydotme mentioned this issue Nov 16, 2015
3 of 3 tasks complete
@simeydotme
Copy link
Owner

@simeydotme simeydotme commented Nov 26, 2015

Added this to documentation website, with a little change to styling 😄
http://simeydotme.github.io/jQuery-ui-Slider-Pips/#styling-double

@YiuriV
Copy link
Author

@YiuriV YiuriV commented Nov 26, 2015

thanx for the solution :) had to change my whole coding though as my boss wanted a completely flexible time-line (no known start or end, dynamic data from json, zooming in and out on the timeline).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants
You can’t perform that action at this time.