First few numbers of jquery UI Slider are being skipped

Can see it here

Instructions are in the fiddle.

Basically, when using a ui-slider, the first set of values are skipped. For example, when the slider handle starts out at 0, and you try to move it to 1, the slider handle will skip to 13 (as is the case with the fiddle). After this, the slider handle behaves normally (no more skips).

The only thing I have found is that changing the width (of both the slider and the slider handle) will change how many numbers are skipped. In particular, making the slider large, and the slider handle small. However, I need the slider to be small, and while there is some flexibility with the slider handle, if you make it too small, the values inside of it look ugly

Am I doing something wrong? is there a work around?

Thanks

Solution

Is the CSS in your #ageInput > .ui-slider-handle rule. Remove the width and use padding instead.

See this jsFiddle example

#ageInput > .ui-slider-handle {
    text-decoration: none;
    padding: 0 30px;
    text-align: center;
}