P5JS Slider problems

p5.js Coding Questions
1

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!

2

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

3

Hi
Slider nice project

4

That’s a good point, @svan. I’ve got my pages up on Github at:
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!

1 Like
5

Try using:

zhi_slider = createSlider(0.0, 0.75, 0.75, 0.01);
6

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.

1 Like