Primeng: Slider: Highlights surrounding text with mouse

[lebnic]

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
DEMO:
http://plnkr.co/edit/jgS6Bj

Current behavior

When Interacting with a slider, the user holds down the mouse button and drag the mouse accross the screen to change the value of the slider. However, a negative side-effect of current implementation is that, often, user will also "highlight" text around the slider as he is interacting with the slider. Try the demo to convince yourself this is a UX issue.

Expected behavior

"Mouse highlight" is disabled when interacting with a slider via the slider-handle.

Minimal reproduction of the problem with instructions

Using the following plnkr http://plnkr.co/edit/jgS6Bj change the value of the slider and observe text above slider gets highlighted (if you drag your mouse over it while changing value of the slider).

What is the motivation / use case for changing the behavior?

User experience is an issue; Often, slider are used as a mean for the user to configure some kind of service. Moreover, these configuration might be critical to the user and user must be cautious not to "miss-configure" his setups. However, if using the slider highlight part of the page, user feels light he does not have full control over his action and might not trust this component (the slider does not seem like a stable component, and users might hesitate using it, in fear that it might be broken...0

Please tell us about your environment:

Linux

• Angular version: 2.0.X
  
  3.10.10

• PrimeNG version: 2.0.X
  
  2.0.0

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  
  chrome

• Language: [all | TypeScript X.X | ES6/7 | ES5]

• Node (for AoT issues): node --version =

[tlcoder]

I have seen the same issue, is there a work-around for this?

[sublime392]

This is what I found that seems to work for me.

*:not(input):not(textarea) {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

[tlcoder]

Thank you, that worked great!

[lebnic]

awesome, I'll try it, thanks

[akram1905]

This can be fixed with minor change on slider.ts file:
https://github.com/primefaces/primeng/blob/master/components/slider/slider.ts#L94
Add event.preventDefault(); as last statement to onMouseDown

[cagataycivici]

Adding for 4.1.0.