{"action":"created","issue":{"url":"https://api.github.com/repos/mui-org/material-ui/issues/12600","repository_url":"https://api.github.com/repos/mui-org/material-ui","labels_url":"https://api.github.com/repos/mui-org/material-ui/issues/12600/labels{/name}","comments_url":"https://api.github.com/repos/mui-org/material-ui/issues/12600/comments","events_url":"https://api.github.com/repos/mui-org/material-ui/issues/12600/events","html_url":"https://github.com/mui-org/material-ui/pull/12600","id":352312180,"node_id":"MDExOlB1bGxSZXF1ZXN0MjA5NjU1OTA2","number":12600,"title":"[Slider] Feature Custom Icon","user":{"login":"adeelibr","id":16651811,"node_id":"MDQ6VXNlcjE2NjUxODEx","avatar_url":"https://avatars0.githubusercontent.com/u/16651811?v=4","gravatar_id":"","url":"https://api.github.com/users/adeelibr","html_url":"https://github.com/adeelibr","followers_url":"https://api.github.com/users/adeelibr/followers","following_url":"https://api.github.com/users/adeelibr/following{/other_user}","gists_url":"https://api.github.com/users/adeelibr/gists{/gist_id}","starred_url":"https://api.github.com/users/adeelibr/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/adeelibr/subscriptions","organizations_url":"https://api.github.com/users/adeelibr/orgs","repos_url":"https://api.github.com/users/adeelibr/repos","events_url":"https://api.github.com/users/adeelibr/events{/privacy}","received_events_url":"https://api.github.com/users/adeelibr/received_events","type":"User","site_admin":false},"labels":[{"id":825982303,"node_id":"MDU6TGFiZWw4MjU5ODIzMDM=","url":"https://api.github.com/repos/mui-org/material-ui/labels/lab","name":"lab","color":"8ceef2","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":9,"created_at":"2018-08-20T22:01:05Z","updated_at":"2018-08-21T22:00:18Z","closed_at":null,"author_association":"CONTRIBUTOR","pull_request":{"url":"https://api.github.com/repos/mui-org/material-ui/pulls/12600","html_url":"https://github.com/mui-org/material-ui/pull/12600","diff_url":"https://github.com/mui-org/material-ui/pull/12600.diff","patch_url":"https://github.com/mui-org/material-ui/pull/12600.patch"},"body":"I have added a new prop called thumb to the Slider component, which you can use like this.\r\n\r\n```\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport Slider from '@material-ui/lab/Slider';\r\nimport DeleteIcon from '@material-ui/icons/Delete';\r\n\r\nconst styles = {\r\n  root: {\r\n    width: 300,\r\n  },\r\n};\r\n\r\nclass SimpleSlider extends React.Component {\r\n  state = {\r\n    value: 50,\r\n  };\r\n\r\n  handleChange = (event, value) => {\r\n    this.setState({ value });\r\n  };\r\n\r\n  render() {\r\n    const { classes } = this.props;\r\n    const { value } = this.state;\r\n\r\n    return (\r\n      <div className={classes.root}>\r\n        <Typography id=\"label\">Slider Image</Typography>\r\n        <Slider\r\n          value={value}\r\n          aria-labelledby=\"label\"\r\n          onChange={this.handleChange}\r\n          thumb={<img src=\"/static/images/cards/live-from-space.jpg\" alt=\"\" />}\r\n        />\r\n        <Typography id=\"label\">Slider Simple</Typography>\r\n        <Slider value={value} aria-labelledby=\"label\" onChange={this.handleChange} />\r\n        <Typography id=\"label\">Slider Icon</Typography>\r\n        <Slider\r\n          value={value}\r\n          aria-labelledby=\"label\"\r\n          onChange={this.handleChange}\r\n          thumb={<DeleteIcon style={{ color: 'green' }} />}\r\n        />\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\nSimpleSlider.propTypes = {\r\n  classes: PropTypes.object.isRequired,\r\n};\r\n\r\nexport default withStyles(styles)(SimpleSlider);\r\n```\r\n\r\nThis looks something like this\r\n![44003423-f0bb4f9c-9e6b-11e8-9007-2406daf457f6](https://user-images.githubusercontent.com/16651811/44369017-4b760e80-a4ee-11e8-9435-66c3666a4a78.PNG)\r\n\r\n\r\nThis is a clean version of https://github.com/mui-org/material-ui/pull/12485 which got messed up, I kept on trying for some hours. but I guess I messed that pr more. Lesson learnt at my end.\r\n"},"comment":{"url":"https://api.github.com/repos/mui-org/material-ui/issues/comments/414835932","html_url":"https://github.com/mui-org/material-ui/pull/12600#issuecomment-414835932","issue_url":"https://api.github.com/repos/mui-org/material-ui/issues/12600","id":414835932,"node_id":"MDEyOklzc3VlQ29tbWVudDQxNDgzNTkzMg==","user":{"login":"adeelibr","id":16651811,"node_id":"MDQ6VXNlcjE2NjUxODEx","avatar_url":"https://avatars0.githubusercontent.com/u/16651811?v=4","gravatar_id":"","url":"https://api.github.com/users/adeelibr","html_url":"https://github.com/adeelibr","followers_url":"https://api.github.com/users/adeelibr/followers","following_url":"https://api.github.com/users/adeelibr/following{/other_user}","gists_url":"https://api.github.com/users/adeelibr/gists{/gist_id}","starred_url":"https://api.github.com/users/adeelibr/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/adeelibr/subscriptions","organizations_url":"https://api.github.com/users/adeelibr/orgs","repos_url":"https://api.github.com/users/adeelibr/repos","events_url":"https://api.github.com/users/adeelibr/events{/privacy}","received_events_url":"https://api.github.com/users/adeelibr/received_events","type":"User","site_admin":false},"created_at":"2018-08-21T22:00:18Z","updated_at":"2018-08-21T22:00:18Z","author_association":"CONTRIBUTOR","body":"I have updated the demo with a better image of a circle.\r\n![slider image](https://user-images.githubusercontent.com/16651811/44431474-724c4780-a5b7-11e8-91dd-a8e87bcce8da.PNG)\r\n"}}
{"actor":{"display_login":"adeelibr"}}