p5.js example

# On Chrome, createSlider with instance mode makes duplicated sliders **URL:** \ **Category:** Coding Questions\ **Created:** [May 6, 2020, 7:04am UTC](https://discourse.processing.org/t/on-chrome-createslider-with-instance-mode-makes-duplicated-sliders/20531 "2020-05-06T07:04:05Z")\ **Posts on this page:** 4\ **Page:** 1

**Author:** ![ahirose](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ahirose/32/9090_2.png) [@ahirose](https://discourse.processing.org/u/ahirose)\ **Post date:** [May 6, 2020, 7:04am UTC](https://discourse.processing.org/t/on-chrome-createslider-with-instance-mode-makes-duplicated-sliders/20531/1 "2020-05-06T07:04:05Z")

Hi all, Thank you for your effort to keep the quality of this great community. I just tried to port a createSlider example to the instance mode then hit a issue. How can I solve it? Following is my code, it’s working well with Firefox 75 on Windows, at the same time showing two slider bars on Chrome 81. ![cs01](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/7be30468d0076b778f7f5b2479d8440c06c330f1.gif) ```auto const sketch = (s) => { let slider; s.setup=()=> { s.colorMode(s.HSB); slider = s.createSlider(0, 360, 60, 40); slider.position(10, 10); slider.style('width', '80px'); } s.draw=()=> { s.background(slider.value(), 100, 100, 1); } } let myp5 = new p5(sketch); ``` ---

**Author:** ![Sven](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sven/32/8293_2.png) [@Sven](https://discourse.processing.org/u/Sven)\ **Post date:** [May 6, 2020, 8:31am UTC](https://discourse.processing.org/t/on-chrome-createslider-with-instance-mode-makes-duplicated-sliders/20531/2 "2020-05-06T08:31:48Z")

Hello and welcome, That definitely looks weird. 😄 I tried for myself, using the [Web Editor](https://editor.p5js.org), just now and it does not show that behavior for me in Chrome 81 on Windows 10 Pro. ```javascript let slider; function setup() { colorMode(HSB); slider = createSlider(0, 360, 60, 40); slider.position(10, 10); slider.style('width', '80px'); } function draw() { background(slider.value(), 100, 100, 1); } ``` Here’s a bunch of questions for you: 1. Are you on Windows 10 as well? 2. Are you on the latest version of the p5.js library? (1.00) 3. Do you have the opportunity to test in Chrome on a friend’s computer? ---

**Author:** ![ahirose](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ahirose/32/9090_2.png) [@ahirose](https://discourse.processing.org/u/ahirose)\ **Post date:** [May 6, 2020, 11:42am UTC](https://discourse.processing.org/t/on-chrome-createslider-with-instance-mode-makes-duplicated-sliders/20531/3 "2020-05-06T11:42:08Z")

Hi Sven, Thank you for your confirmation. I found it’s working perfectly with Chrome+Windows10 on editor.p5js. [https://editor.p5js.org/ahirose/sketches/Lw-RmHVfJ](https://editor.p5js.org/ahirose/sketches/Lw-RmHVfJ) So seems my local server(Web Server for Chrome) has some issue. Anyway it’s fine for my study. Let me close this question! Thanks and Regards, ---

**Author:** ![ahirose](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ahirose/32/9090_2.png) [@ahirose](https://discourse.processing.org/u/ahirose)\ **Post date:** [May 6, 2020, 12:05pm UTC](https://discourse.processing.org/t/on-chrome-createslider-with-instance-mode-makes-duplicated-sliders/20531/4 "2020-05-06T12:05:07Z")

Just for a future reference, let me note my experience. It seems repro only on Local Server + p5.sound + Chrome + Windows10. The html is followings. ```auto p5.js example ``` It will work fine if you delete `` or simply put it on the other web server, or run on except Chrome.