{"action":"created","issue":{"url":"https://api.github.com/repos/callemall/material-ui/issues/3237","repository_url":"https://api.github.com/repos/callemall/material-ui","labels_url":"https://api.github.com/repos/callemall/material-ui/issues/3237/labels{/name}","comments_url":"https://api.github.com/repos/callemall/material-ui/issues/3237/comments","events_url":"https://api.github.com/repos/callemall/material-ui/issues/3237/events","html_url":"https://github.com/callemall/material-ui/pull/3237","id":132078504,"number":3237,"title":"[Slider] Add keyboard support","user":{"login":"felipethome","id":4316501,"avatar_url":"https://avatars.githubusercontent.com/u/4316501?v=3","gravatar_id":"","url":"https://api.github.com/users/felipethome","html_url":"https://github.com/felipethome","followers_url":"https://api.github.com/users/felipethome/followers","following_url":"https://api.github.com/users/felipethome/following{/other_user}","gists_url":"https://api.github.com/users/felipethome/gists{/gist_id}","starred_url":"https://api.github.com/users/felipethome/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/felipethome/subscriptions","organizations_url":"https://api.github.com/users/felipethome/orgs","repos_url":"https://api.github.com/users/felipethome/repos","events_url":"https://api.github.com/users/felipethome/events{/privacy}","received_events_url":"https://api.github.com/users/felipethome/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/callemall/material-ui/labels/PR:%20Needs%20Revision","name":"PR: Needs Revision","color":"e11d21"}],"state":"open","locked":false,"assignee":null,"milestone":{"url":"https://api.github.com/repos/callemall/material-ui/milestones/10","html_url":"https://github.com/callemall/material-ui/milestones/0.15.0%20Release","labels_url":"https://api.github.com/repos/callemall/material-ui/milestones/10/labels","id":1472363,"number":10,"title":"0.15.0 Release","description":"","creator":{"login":"alitaheri","id":8528759,"avatar_url":"https://avatars.githubusercontent.com/u/8528759?v=3","gravatar_id":"","url":"https://api.github.com/users/alitaheri","html_url":"https://github.com/alitaheri","followers_url":"https://api.github.com/users/alitaheri/followers","following_url":"https://api.github.com/users/alitaheri/following{/other_user}","gists_url":"https://api.github.com/users/alitaheri/gists{/gist_id}","starred_url":"https://api.github.com/users/alitaheri/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/alitaheri/subscriptions","organizations_url":"https://api.github.com/users/alitaheri/orgs","repos_url":"https://api.github.com/users/alitaheri/repos","events_url":"https://api.github.com/users/alitaheri/events{/privacy}","received_events_url":"https://api.github.com/users/alitaheri/received_events","type":"User","site_admin":false},"open_issues":28,"closed_issues":11,"state":"open","created_at":"2015-12-23T09:11:44Z","updated_at":"2016-02-23T06:31:01Z","due_on":null,"closed_at":null},"comments":24,"created_at":"2016-02-08T08:14:50Z","updated_at":"2016-02-23T07:16:10Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/callemall/material-ui/pulls/3237","html_url":"https://github.com/callemall/material-ui/pull/3237","diff_url":"https://github.com/callemall/material-ui/pull/3237.diff","patch_url":"https://github.com/callemall/material-ui/pull/3237.patch"},"body":"The changes I want to propose are a little bit big, so I will divide it in two. I did a [demo](http://felipethome.github.io/mui-demo/slider/dist/) so you can check the final result.\r\nI tested it against Chrome 47+, IE 10+, Firefox 43+, Safari 9.0, Android 4.4+\r\n\r\nThe changes I added in this PR:  \r\n\r\n1. Support to move the slider handle using the keyboard when it has focus (left arrow, right arrow, page down, page up, home, end)\r\n\r\n2. When you click on the track it brings the handle under the cursor on *mousedown* and you can move it (no need anymore to release the mouse button and click on the handle). This solves: #1642\r\n\r\n3. Support to do the same thing as above using touch events. This solves another issue: when clicking on the track using a touch device, since the corresponding touch event is not mapped the device will simulate a mouse event and then the *touchend* will not fire leaking the listeners and creating undesired behaviors. To reproduce this issue you just need to tap on the track instead of the handle using a touch device, and after, tap on the handle and move it. You will notice the slider will remain in active state even when you are not performing any action.\r\n\r\n4. Add `preventDefault()` in the right place to avoid *scroll* and *context menu* when using touch events. Also I changed the approach of cancelling text selection using the * `user-select` css property. I did that because, one, the `autoPrefix.set()` will be removed and currently is not working which means text selection still happens, two, it makes possible to give focus to the handle when the user click directly on the track.\r\n\r\nChanges I want to add in the next one:\r\n\r\n1. Add a label over the slider handle following the discrete [slider specification](https://www.google.com/design/spec/components/sliders.html)\r\n\r\n2. Add more variables to the slider theme so the user can control all aspects of the label.\r\n\r\nObs: instead of following completely the specs for the label, I did a similar behaviour with the one found in the [polymer paper slider](https://elements.polymer-project.org/elements/paper-slider?view=demo:demo/index.html&active=paper-slider) as you can see in the demo.\r\n\r\nThough I know these PR is big, I think there are valid ideas here. Hope you like."},"comment":{"url":"https://api.github.com/repos/callemall/material-ui/issues/comments/187578089","html_url":"https://github.com/callemall/material-ui/pull/3237#issuecomment-187578089","issue_url":"https://api.github.com/repos/callemall/material-ui/issues/3237","id":187578089,"user":{"login":"felipethome","id":4316501,"avatar_url":"https://avatars.githubusercontent.com/u/4316501?v=3","gravatar_id":"","url":"https://api.github.com/users/felipethome","html_url":"https://github.com/felipethome","followers_url":"https://api.github.com/users/felipethome/followers","following_url":"https://api.github.com/users/felipethome/following{/other_user}","gists_url":"https://api.github.com/users/felipethome/gists{/gist_id}","starred_url":"https://api.github.com/users/felipethome/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/felipethome/subscriptions","organizations_url":"https://api.github.com/users/felipethome/orgs","repos_url":"https://api.github.com/users/felipethome/repos","events_url":"https://api.github.com/users/felipethome/events{/privacy}","received_events_url":"https://api.github.com/users/felipethome/received_events","type":"User","site_admin":false},"created_at":"2016-02-23T07:16:10Z","updated_at":"2016-02-23T07:16:10Z","body":"Nice @newoga !! I am certain they will deprecate string refs soon.\r\n\r\nTests will help so much, it will speed up the work a lot because every time we change something we need to worry if everything is ok. I will gladly do it!"}}