Jquery UI slider values in handles not showing up?

Question

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

You can't manipulate pseudo-elements with JavaScript since they don't really exist in the DOM. Your best best is to re-create the elements with actual DOM elements with jQuery which will allow you to access them and set the values. — j08691, May 19 '15 at 20:33

score 2 · Accepted Answer · answered May 19 '15 at 20:39

2

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;**

}

answered May 19 '15 at 20:39

james00794

1,137
7
14

Thank you james00794! Such a silly thing. I see data missing and assume it must be an error in the js. Weeeeeee! :) – Kirk Ross May 19 '15 at 22:07
Also, starting on line 40 of the js I have some code to prevent dragging to range less than 60 minutes but it isn't working... any clues there? – Kirk Ross May 19 '15 at 23:06
You seem to be accessing array values that don't exist. ui.values only has 2 elements, which correspond to the position of the two handles. I would simply check whether the difference between ui.values[0] and ui.values[1] is less than 60, and if so, return false. See fiddle here: https://jsfiddle.net/194d00fm/2/ – james00794 May 21 '15 at 23:19

score 0 · Answer 2 · answered May 19 '15 at 23:08

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?

Jquery UI slider values in handles not showing up?

2 Answers2