prevent text selection when dragging bootstrap-slider handle in Firefox

Question

I'm using bootstrap-slider with two sliders on a single page. My problem is that the text in the page gets selected if I drag the mouse away of the handle while still dragging it.

The problem is also present on the demo page (Firefox only).

The problem can be seen in the image below:

I tried this solution but it didn't work.

Update: It only happens in Firefox, not Chrome.

Answer 1

Use this for all browsers:

.slider .tooltip-inner {
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */      
}