# P5JS Slider problems

**URL:** https://discourse.processing.org/t/p5js-slider-problems/38289
**Category:** Coding Questions
**Created:** [August 10, 2022, 1:55am UTC](https://discourse.processing.org/t/p5js-slider-problems/38289 "2022-08-10T01:55:56Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![astrogeek](https://avatars.discourse-cdn.com/v4/letter/a/e95f7d/32.png) [@astrogeek](https://discourse.processing.org/u/astrogeek)
#### Post date: [August 10, 2022, 1:55am UTC](https://discourse.processing.org/t/p5js-slider-problems/38289/1 "2022-08-10T01:55:56Z")

</div>

I’m working on a p5js data visualization that I want to control with sliders. I’ve successfully used sliders on an earlier visualization. I compared the html, js, and css files for my older successful project and my new project and I can’t find anything that would cause the slider problems I’m seeing.

In the new project, I copied the `createSlider()` calls I used in the previous visualization. For example, I use `createSlider(0.0, 0.75, 0.5)` to limit the slider between the values of 0.0 and 0.75, with a default of 0.5.

The slider in the new project exhibits two problems. First, the handle of the slider starts at a value of 0.0 instead of 0.5. Second, the slider won’t react to any mouse activity at all.

I’m at a loss to understand what I’ve done differently between the first project and the second project that is causing these problems in the second project. Are there really basic issues that are easy to overlook when creating a slider? Or known coding mistakes that will cause a slider to lock up?

Thanks in advance!

---

<div class="post-metadata">

### Author: ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)
#### Post date: [August 10, 2022, 6:02am UTC](https://discourse.processing.org/t/p5js-slider-problems/38289/2 "2022-08-10T06:02:07Z")

</div>

Sliders work ok on my system. It would help if we could see the code that you are using; problem could be elsewhere.

---

<div class="post-metadata">

### Author: ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)
#### Post date: [August 10, 2022, 12:26pm UTC](https://discourse.processing.org/t/p5js-slider-problems/38289/3 "2022-08-10T12:26:47Z")

</div>

Hi  
Slider nice project

[![](https://img.youtube.com/vi/Bk8rLzzSink/hqdefault.jpg "17.6: Sound Synthesis - p5.js Sound Tutorial") ](https://www.youtube.com/watch?v=Bk8rLzzSink)

---

<div class="post-metadata">

### Author: ![astrogeek](https://avatars.discourse-cdn.com/v4/letter/a/e95f7d/32.png) [@astrogeek](https://discourse.processing.org/u/astrogeek)
#### Post date: [August 10, 2022, 7:12pm UTC](https://discourse.processing.org/t/p5js-slider-problems/38289/4 "2022-08-10T19:12:05Z")

</div>

That’s a good point, @svan. I’ve got my pages up on Github at:  
[https://github.com/astromcc/astromcc.github.io](https://github.com/astromcc/astromcc.github.io)

The page with the problematic slider is `sdss-gal-slices_new.html`, in the `visualizations` folder. Another page with a working slider is `expansion-models.html`. I created the second page to compare to the first one in order to spot possible explanations for the slider behavior.

The JS and CSS files for both pages are in the folder `resources`.

My next step is to trim the `sdss-gal-slices` files down to the slider calls. I posted yesterday in the hope I might have missed something very obvious that I might have missed in my use of `createSlider`.

I’m editing these files on Sublime Text 4 and using the Browser Sync add-on to preview them locally. But I don’t think it can be either of those causing the issue, since I can create working sliders in another HTML file.

@jafal: I’m a big fan of Dan and Coding Train! I hadn’t watched that video, but I watched several of his basic slider videos hoping for a clue. Thanks for the tip!

---

<div class="post-metadata">

### Author: ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)
#### Post date: [August 10, 2022, 7:52pm UTC](https://discourse.processing.org/t/p5js-slider-problems/38289/5 "2022-08-10T19:52:09Z")

</div>

Try using:

```auto
zhi_slider = createSlider(0.0, 0.75, 0.75, 0.01);

```

---

<div class="post-metadata">

### Author: ![astrogeek](https://avatars.discourse-cdn.com/v4/letter/a/e95f7d/32.png) [@astrogeek](https://discourse.processing.org/u/astrogeek)
#### Post date: [August 10, 2022, 8:26pm UTC](https://discourse.processing.org/t/p5js-slider-problems/38289/6 "2022-08-10T20:26:25Z")

</div>

That fixed it! Thanks @svan!

There’s nothing in the p5js reference page for `createSlider()` about the step having a default value. But a default of 1 would seem reasonable given the other uses I’d seen: 0-100 for a percentage or 0-255 as part of an RGB value. With a step value of 1, a slider with a range \< 1 would have nowhere to slide.
