slider: Set cursor when sliding

[epelc]

Bug, feature request, or proposal:

mdSlider should set the cursor to grab and grabbing

What is the expected behavior?

The cursor should be grab when hovering over the slider and grabbing when dragging it.

What is the current behavior?

A cursor isn't set. It shows as the text select one.

What are the steps to reproduce?

Hover over a slider

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: http://plnkr.co/edit/o077B6uEiiIgkC0S06dd

What is the use-case or motivation for changing an existing behavior?

Style

Which versions of Angular, Material, OS, browsers are affected?

Alpha 10

Is there anything else we should know?

Quick hack/workaround solution:

Note this does not address the situation when you are grabbing but your mouse is not directly on the slider. example you hold down to grab it and then move left/right but move your mouse up/down while still grabbing. Your cursor goes back to the default because the style is only on the thumb.

You can either add a class to body when dragging or set the style directly using typescript.

.md-slider-thumb {
  cursor: -webkit-grab;
  &:active {
    cursor: -webkit-grabbing;
  }
}

I'm not sure what the right way is to add a class to the body in angular 2(I think you need a window/body provider?). But it can probably be done here and cleared in the exit event.

[jelbourn]

cc @mmalerba Thoughts?

I'm not sure if we want to do this- none of material1, polymer, kendo ui, or jquery UI seem to do it.

[mmalerba]

The native <input type="range"> doesn't either (at least on Chrome). We should probably be consistent with what everyone else is doing.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}