Display issue for sliders created with createSlider

[ricardocanada]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

p5.js version

V10.0

Web browser and version

Safari 17.5.1

Operating system

iOS 17.5.1

Steps to reproduce this

Steps:

1. Create a slider named "slider" using createSlider
2. Try sliding it back and forth with a finger - it displays correctly
3. Now try changing slider.value() to various values (within the min and max values)
4. The blue line along the slider does not maintain its integrity, and quickly becomes mottled with white sections
5. The first photo shows the slider displayed correctly with a solid blue line to the left of the handle
6. The other two photos show the mottled appearance of the blue stripe when the slider is moved by slider.value(x)

Snippet:

// Paste your code here :)

[davepagurek]

Does this happen if you do it with vanilla javascript? e.g. using document.createElement('input') + .setAttribute(...) to create a slider, and then updating its value with code? If so, this is likely just a Safari rendering bug that we can't do anything about. If not, then we can try to narrow down what in p5 is making this happen.

[ricardocanada]

Hi, Dave. I will try that later today if you still think it is necessary. The bug happens exactly the same way in Chrome, though, so is not limited to Safari.RichardOn Aug 6, 2024, at 7:47 AM, Dave Pagurek ***@***.***> wrote: Does this happen if you do it with vanilla javascript? e.g. using document.createElement('input') + .setAttribute(...) to create a slider, and then updating its value with code? If so, this is likely just a Safari rendering bug that we can't do anything about. If not, then we can try to narrow down what in p5 is making this happen. —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you authored the thread.Message ID: ***@***.***>

[davepagurek]

Thanks, that would be a good test! Also, on iOS, all browsers are forced by Apple to use Safari's rendering engine (except in Europe, where they've force Apple to start allowing others), so for now in North America, every iOS browser has Safari problems :')

[ricardocanada]

Hi again, Dave. I had no idea until today about Vanilla JavaScript. I spent an hour looking into it. I found a sketch on CodePen called Vanilla Slider than seemed to be just what I needed, but it did not produce an actual slider, just a couple of arrows for controls:Simple Slider vanilla jscodepen.ioI found some YouTube videos on the subject, but all of them produced results similar to the CodePen sketch, ie. not a P5js-style slider.I also searched OpenProcessing for "vanilla", but none of the sketches I hit contained vanilla JavaScript. Looks as if it is a possible area for development of new sketches. It seems infinitely more time-consuming than createSlider, though!Anyway, I will have to leave it to you or someone else more skilled than me to create a vanilla slider.Cheers,RichardOn Aug 6, 2024, at 9:02 AM, Dave Pagurek ***@***.***> wrote: Thanks, that would be a good test! Also, on iOS, all browsers are forced by Apple to use Safari's rendering engine (except in Europe, where they've force Apple to start allowing others), so for now in North America, every iOS browser has Safari problems :') —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you authored the thread.Message ID: ***@***.***>

[davepagurek]

Here's a quick demo on the p5 editor that makes one, if that helps!: https://editor.p5js.org/davepagurek/sketches/A39iPgi99

[ricardocanada]

It is a good start, and a lot more compact than the code I have found so far.But I still don't know how to set the initial value, min, max or increment of the slider. And I don't know how to change the value using code.I could try to guess these things, but that took me over an hour this morning, and you could probably add the code / comment in under 60 seconds. Maybe post the sketch on OpenProcessing?I would be happy to fork it and start using vanilla javaScript. Thanks again,RichardOn Aug 6, 2024, at 10:03 AM, Dave Pagurek ***@***.***> wrote: Here's a quick demo on the p5 editor that makes one, if that helps!: https://editor.p5js.org/davepagurek/sketches/A39iPgi99 —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you authored the thread.Message ID: ***@***.***>

[davepagurek]

Sure thing! Here's an OP version that has min/max/step and value setting: https://openprocessing.org/sketch/2325173

[ricardocanada]

This is great! Thanks. I see that the fault does not appear on the blue line, so it must be a Safari issue.Is it worth reporting?Sent from my iPhoneOn Aug 6, 2024, at 11:21 AM, Dave Pagurek ***@***.***> wrote: Sure thing! Here's an OP version that has min/max/step and value setting: https://openprocessing.org/sketch/2325173 —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you authored the thread.Message ID: ***@***.***>

[ricardocanada]

I made a new example that shows an HTML slider and a JavaScript slider reacting to the same random value. It really shows how buggy the js slider is. I sent a bug report about it to Apple / Safari.HTML Slider test 2 - Richard Bourne - OpenProcessingopenprocessing.orgBtw, one thing I was wondering about the html slider. Can it be positioned on the canvas using variables / attributes? I could not find any information on it. In the examples, it is always outside the canvas.RichardOn Aug 6, 2024, at 12:12 PM, Richard Bourne ***@***.***> wrote:This is great! Thanks. I see that the fault does not appear on the blue line, so it must be a Safari issue.Is it worth reporting?Sent from my iPhoneOn Aug 6, 2024, at 11:21 AM, Dave Pagurek ***@***.***> wrote: Sure thing! Here's an OP version that has min/max/step and value setting: https://openprocessing.org/sketch/2325173 —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you authored the thread.Message ID: ***@***.***>

[davepagurek]

I see that the fault does not appear on the blue line

Does that mean that using the plain HTML ones, you aren't seeing the same visual glitches that you were seeing with the p5 ones? If so, p5 is doing a lot of the same stuff under the hood, so there might be something additional it's doing that is causing the glitches that we haven't done yet in these vanilla js tests.

Btw, one thing I was wondering about the html slider. Can it be positioned on the canvas using variables / attributes? I could not find any information on it. In the examples, it is always outside the canvas.

You can style HTML sliders by setting its style attribute to a CSS string. That's also what p5 sliders do under the hood when you position them, so these are roughly equivalent:

// p5:
const slider = createSlider()
slider.position(20, 50)

// HTML/JS:
const slider = document.createElement('input')
slider.setAttribute('type', 'range')
slider.style.position = 'absolute' // Position relative to the whole page
slider.style.top = '20px' // You can also do other units, e.g. '50%'
slider.style.left = '50px'

You can try playing around with the position values to try to get it to go on top of the canvas, but it definitely can get complicated when the canvas isn't in the top left. A strategy one might use in that case is to wrap the main canvas in an element whose position is set to relative, and then place both the slider and the canvas in that containing element so that absolute positions are now calculated with respect to that container's top left. Definitely more effort though, but I can elaborate more if that'd be helpful!

[ricardocanada]

I noticed with my sketch that compares the two types of sliders, the JavaScript slider seemed more likely to create artifacts if the handle moved a larger percentage of the track length, or if the variable controlling its value changed more often. For short moves and less frequency, I had to wait much longer to see it produce an artifact.The HTML slider handled every type of move with no artifacts.Thanks for the positioning information. I will try it out.On Aug 7, 2024, at 6:49 AM, Dave Pagurek ***@***.***> wrote: I see that the fault does not appear on the blue line Does that mean that using the plain HTML ones, you aren't seeing the same visual glitches that you were seeing with the p5 ones? If so, p5 is doing a lot of the same stuff under the hood, so there might be something additional it's doing that is causing the glitches that we haven't done yet in these vanilla js tests. Btw, one thing I was wondering about the html slider. Can it be positioned on the canvas using variables / attributes? I could not find any information on it. In the examples, it is always outside the canvas. You can style HTML sliders by setting its style attribute to a CSS string. That's also what p5 sliders do under the hood when you position them, so these are roughly equivalent: // p5: const slider = createSlider() slider.position(20, 50) // HTML/JS: const slider = document.createElement('input') slider.setAttribute('type', 'range') slider.style.position = 'absolute' // Position relative to the whole page slider.style.top = '20px' // You can also do other units, e.g. '50%' slider.style.left = '50px' You can try playing around with the position values to try to get it to go on top of the canvas, but it definitely can get complicated when the canvas isn't in the top left. A strategy one might use in that case is to wrap the main canvas in an element whose position is set to relative, and then place both the slider and the canvas in that containing element so that absolute positions are now calculated with respect to that container's top left. Definitely more effort though, but I can elaborate more if that'd be helpful! —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you authored the thread.Message ID: ***@***.***>