{"action":"created","issue":{"url":"https://api.github.com/repos/Olical/react-faux-dom/issues/20","labels_url":"https://api.github.com/repos/Olical/react-faux-dom/issues/20/labels{/name}","comments_url":"https://api.github.com/repos/Olical/react-faux-dom/issues/20/comments","events_url":"https://api.github.com/repos/Olical/react-faux-dom/issues/20/events","html_url":"https://github.com/Olical/react-faux-dom/issues/20","id":112061348,"number":20,"title":"slider using react-faux-dom.","user":{"login":"vikrammirla","id":11378504,"avatar_url":"https://avatars.githubusercontent.com/u/11378504?v=3","gravatar_id":"","url":"https://api.github.com/users/vikrammirla","html_url":"https://github.com/vikrammirla","followers_url":"https://api.github.com/users/vikrammirla/followers","following_url":"https://api.github.com/users/vikrammirla/following{/other_user}","gists_url":"https://api.github.com/users/vikrammirla/gists{/gist_id}","starred_url":"https://api.github.com/users/vikrammirla/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/vikrammirla/subscriptions","organizations_url":"https://api.github.com/users/vikrammirla/orgs","repos_url":"https://api.github.com/users/vikrammirla/repos","events_url":"https://api.github.com/users/vikrammirla/events{/privacy}","received_events_url":"https://api.github.com/users/vikrammirla/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/Olical/react-faux-dom/labels/question","name":"question","color":"cc317c"}],"state":"open","locked":false,"assignee":{"login":"Olical","id":315229,"avatar_url":"https://avatars.githubusercontent.com/u/315229?v=3","gravatar_id":"","url":"https://api.github.com/users/Olical","html_url":"https://github.com/Olical","followers_url":"https://api.github.com/users/Olical/followers","following_url":"https://api.github.com/users/Olical/following{/other_user}","gists_url":"https://api.github.com/users/Olical/gists{/gist_id}","starred_url":"https://api.github.com/users/Olical/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Olical/subscriptions","organizations_url":"https://api.github.com/users/Olical/orgs","repos_url":"https://api.github.com/users/Olical/repos","events_url":"https://api.github.com/users/Olical/events{/privacy}","received_events_url":"https://api.github.com/users/Olical/received_events","type":"User","site_admin":false},"milestone":null,"comments":2,"created_at":"2015-10-19T02:47:04Z","updated_at":"2015-10-19T22:34:07Z","closed_at":null,"body":"Hi,\r\nI am trying to add slider using react-faux-dom.\r\nAs I am absolute beginner with react, I am not sure what to do in handleDrag() function.\r\nAny suggestions on updating values after a slider is dragged?\r\nThank you\r\n\r\n```javascript\r\nimport d3 from 'd3'\r\nimport React from 'react'\r\nimport ReactFauxDOM from 'react-faux-dom'\r\n\r\nclass Slider extends React.Component {\r\n  componentDidMount() {\r\n    var drag = d3.behavior.drag()\r\n      .on(\"drag\", this.handleDrag)\r\n    var dom = React.findDOMNode(this);\r\n    d3.select(dom).call(drag)\r\n  }\r\n\r\n  handleDrag() {\r\n    var posY = d3.mouse(React.findDOMNode(this)),\r\n      newValue = Math.max(0, Math.min(1,posY/400))\r\n    //this.onChange(newValue);\r\n    //not sure what to do here\r\n    //need advice\r\n  }\r\n\r\n  render() {\r\n    const {width, height, value} = this.props\r\n    const el = d3.select(ReactFauxDOM.createElement('svg'))\r\n      .attr('width',width)\r\n      .attr('height',height)\r\n\r\n    el.append(\"rect\")\r\n      .attr('width',width*value)\r\n      .attr('height',height)\r\n      .attr('class',\"Slider-fill\")\r\n\r\n    el.append(\"rect\")\r\n      .attr('width',width)\r\n      .attr('height',height)\r\n      .attr('class',\"Slider-border\")\r\n\r\n    el.append(\"text\")\r\n      .attr('x',width/2)\r\n      .attr('y',height/2)\r\n      .text(value)\r\n\r\n    return el.node().toReact();\r\n  }\r\n}\r\n\r\nexport default Slider\r\n```"},"comment":{"url":"https://api.github.com/repos/Olical/react-faux-dom/issues/comments/149366584","html_url":"https://github.com/Olical/react-faux-dom/issues/20#issuecomment-149366584","issue_url":"https://api.github.com/repos/Olical/react-faux-dom/issues/20","id":149366584,"user":{"login":"vikrammirla","id":11378504,"avatar_url":"https://avatars.githubusercontent.com/u/11378504?v=3","gravatar_id":"","url":"https://api.github.com/users/vikrammirla","html_url":"https://github.com/vikrammirla","followers_url":"https://api.github.com/users/vikrammirla/followers","following_url":"https://api.github.com/users/vikrammirla/following{/other_user}","gists_url":"https://api.github.com/users/vikrammirla/gists{/gist_id}","starred_url":"https://api.github.com/users/vikrammirla/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/vikrammirla/subscriptions","organizations_url":"https://api.github.com/users/vikrammirla/orgs","repos_url":"https://api.github.com/users/vikrammirla/repos","events_url":"https://api.github.com/users/vikrammirla/events{/privacy}","received_events_url":"https://api.github.com/users/vikrammirla/received_events","type":"User","site_admin":false},"created_at":"2015-10-19T22:34:07Z","updated_at":"2015-10-19T22:34:07Z","body":"Thanks for your response. I will try your suggestion"}}