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

Comments

Projects
None yet
2 participants
@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

This comment has been minimized.

Show comment
Hide comment
@simeydotme

simeydotme Oct 30, 2015

Owner

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 😁

Owner

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

This comment has been minimized.

Show comment
Hide comment
@simeydotme
Owner

simeydotme commented Nov 16, 2015

@simeydotme simeydotme closed this Nov 16, 2015

@simeydotme simeydotme referenced this issue Nov 16, 2015

Closed

Add documentation #72

3 of 3 tasks complete
@simeydotme

This comment has been minimized.

Show comment
Hide comment
@simeydotme

simeydotme Nov 26, 2015

Owner

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

Owner

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

This comment has been minimized.

Show comment
Hide comment
@YiuriV

YiuriV 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).

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