{"action":"closed","issue":{"url":"https://api.github.com/repos/leongersen/noUiSlider/issues/731","repository_url":"https://api.github.com/repos/leongersen/noUiSlider","labels_url":"https://api.github.com/repos/leongersen/noUiSlider/issues/731/labels{/name}","comments_url":"https://api.github.com/repos/leongersen/noUiSlider/issues/731/comments","events_url":"https://api.github.com/repos/leongersen/noUiSlider/issues/731/events","html_url":"https://github.com/leongersen/noUiSlider/issues/731","id":192114164,"number":731,"title":"Uncaught (in promise) Error: Slider was already initialized.","user":{"login":"cdubant","id":12911253,"avatar_url":"https://avatars.githubusercontent.com/u/12911253?v=3","gravatar_id":"","url":"https://api.github.com/users/cdubant","html_url":"https://github.com/cdubant","followers_url":"https://api.github.com/users/cdubant/followers","following_url":"https://api.github.com/users/cdubant/following{/other_user}","gists_url":"https://api.github.com/users/cdubant/gists{/gist_id}","starred_url":"https://api.github.com/users/cdubant/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/cdubant/subscriptions","organizations_url":"https://api.github.com/users/cdubant/orgs","repos_url":"https://api.github.com/users/cdubant/repos","events_url":"https://api.github.com/users/cdubant/events{/privacy}","received_events_url":"https://api.github.com/users/cdubant/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2016-11-28T20:53:18Z","updated_at":"2016-11-29T10:48:28Z","closed_at":"2016-11-29T10:48:28Z","body":"Hi,\r\n\r\nI successfully implemented noUiSlider as a component (reusable component) in an app using Laravel and Vue.js.\r\n\r\nThe slider is wrapped in the Vue.js component which serves for setting / displaying opening times.\r\nSo basically, the idea is to have 7 sliders (one for each day in a week) and slide each day.\r\n\r\nIn my \"parent\" component in Vue JS\r\n```html\r\n<div>\r\n\t<time-slider name=\"monday\"></time-slider>\r\n\t<time-slider name=\"tuesday\"></time-slider>\r\n\t<time-slider name=\"wednesday\"></time-slider>\r\n\t<time-slider name=\"thursday\"></time-slider>\r\n\t<time-slider name=\"friday\"></time-slider>\r\n\t<time-slider name=\"saturday\"></time-slider>\r\n\t<time-slider name=\"sunday\"></time-slider>\r\n</div>\r\n```\r\n\r\nIn the child component Vue JS\r\n```vue\r\n<template>\r\n\t<div >\r\n\t\t<div class=\"row text-center\">\r\n\t\t\t<div id=\"range\"></div>\r\n\t\t\t<div class=\"col-md-6\">\r\n\t\t\t\t<div id=\"rangestart\"></div>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"col-md-6\">\r\n\t\t\t\t<div id=\"rangeend\"></div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</template>\r\n\r\n<script>\r\n\r\n\timport noUiSlider from 'nouislider'\r\n\r\n\texport default {\r\n\t\tdata: function(){\r\n\t\t\treturn {\r\n\t\t\t}\r\n\t\t},\r\n\r\n\t\tready : function()\r\n        {\r\n        \tvar rfSlider = document.getElementById('range');\r\n        \tvar rfSliderValues = [\r\n\t\t\t\tdocument.getElementById('rangestart'),\r\n\t\t\t\tdocument.getElementById('rangeend')\r\n\t\t\t];\r\n\t\t\tnoUiSlider.create(rfSlider, {\r\n\t\t\t    start: [540, 1020],\r\n\t\t\t    connect: true,\r\n\t\t\t    animate: false,\r\n\t\t\t    step: 30,\r\n\t\t\t    range: {\r\n\t\t\t        'min': 0,\r\n\t\t\t        'max': 1440\r\n\t\t\t    }\r\n\t\t\t});\r\n\r\n\t\t\tfunction toTime(value) {\r\n\t\t\t    var hours = Math.floor(value / 60);\r\n\t\t\t    var minutes = value % 60;\r\n\t\t\t    var time = toTwoChars(hours) + ':' + toTwoChars(minutes);\r\n\t\t\t    return time;\r\n\t\t\t}\r\n\r\n\t\t\tfunction toTwoChars(value) {\r\n\t\t\t\tvar operand = value.toString();\r\n\t\t\t\tif(operand.length == 1){ operand = \"0\" + operand; }\r\n\t\t\t    return operand;\r\n\t\t\t}\r\n\r\n\t\t\trfSlider.noUiSlider.on('update', function( values, handle ) {\r\n\t\t\t\trfSliderValues[handle].innerHTML = toTime(values[handle]);\r\n\t\t\t});\r\n        },\r\n\r\n\t\tcomponents: {\r\n\t\t\tnoUiSlider,\r\n\t\t},\r\n\t}\r\n</script>\r\n```\r\n\r\nI know I shouldn't have several times the same ids replicated (and make it dynamic, this is easy with vue) but I think the error message rather comes from the fact that I import noUiSlider every time I instanciate the child-component.\r\n\r\nPlus, the error message is coming from the slider lib itself.\r\n\r\nCan you help me in this?\r\n\r\nThank you in advance.\r\n"}}
{"actor":{"display_login":"cdubant"}}