Boostrap-slider tooltip doesn't display properly on mobile

Question

The slider works fine on my desktop but on mobile you need to press the circle (mover on the slider) several times for it to get focus and the tooltip to appear, otherwise you'd just be sliding blindly.

The slider HTML is:

<input name="sliderAvgT" id="sliderAvgT" type="text"><br />

Java:

sliderAvgT = new Slider("#sliderAvgT", { id: "slider12c", min: {{minAvgT}}, max: {{maxAvgT}}, range: true, value: [defaultMinAvgT, defaultMaxAvgT] });

CSS:

none

Answer 1

Like we talked about in the comments this is currently a known and open issue on Git Hub. You can read about it here.

An alternate solution would be to always display the tooltip to the user so they can see the value when sliding on a mobile device. Using example #8 taken from the demo site:

// With JQuery
$("#ex8").slider({
    tooltip: 'always'
});

// Without JQuery
var slider = new Slider("#ex8", {
    tooltip: 'always'
});

Hope that helps.