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();
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;**
}