CODEWITHSUNDEEP
jqueryjquery-uisliderhandles
Kirk Ross
Kirk Ross

Reputation: 7153

Jquery UI slider values in handles not showing up?

I'm trying to put time values in the slider handles of this jquery-ui slider and can't figure out why the values aren't printing inside the label / handles.

Below is a fiddle:

http://jsfiddle.net/kirkbross/194d00fm/

$("#time_range").slider();

Upvotes: 0

Views: 610

Answers (2)

Kirk Ross
Kirk Ross

Reputation: 7153

It was a simple line height issue.

Updated fiddle:

http://jsfiddle.net/kirkbross/194d00fm/1/

$("#time_range").slider();

I have some code starting at line 40 of the js to prevent making a range smaller than 60 minutes. Any clue as to what's wrong with my code?

Upvotes: 0

james00794
james00794

Reputation: 1147

It is because the ::after selector is inheriting a line-height css property of 50px from one of it's parents. If you set the overflow property of the ::after selector to visible, you will be able to see where the text is printing. The solution is to add a line-height property to the ::after selector, with something more reasonable (I found that 10px works).

#time_range .ui-slider-handle:after {
content : attr(data-value);
position: absolute;
...
**line-height: 10px;**

}

Upvotes: 2

Related Questions