Bug: Rendering issue with <sp-slider> handle

Photoshop UXP Plugin API
1

Tested On:
Photoshop 24.0.0
UXP Version: 6.3.3

Photoshop 23.5.0 (API Version: 2)
UXP Version: 6.2.1
(Mac and Windows)

Issue:
There seems to be a rendering bug on <sp-slider> elements where the slider handle jumps to the far left for a small value (< 5) when the slider’s max value is > 100.

It becomes more apparent when the slider is very long.

For example:

image
image665×360 36.2 KB

Example sliders 3, 4 and 5 each have the same min and max values, but notice that Example 4, which has a value of 4, has a handle that is further left than Example 3 which has a value of 0.

Here is the HTML:

<!DOCTYPE html>
<html>
<head>
    <script src="index.js"></script>
</head>
<style>
    body {
        padding: 20px;
    }

</style>
<body>
<sp-slider min="0" max="50" value="4">
    <sp-label slot="label">Example #1 (min: 0, max: 50)</sp-label>
</sp-slider>
<sp-slider min="0" max="100" value="4">
    <sp-label slot="label">Example #2 (min: 0, max: 100)</sp-label>
</sp-slider>
<sp-slider min="0" max="500" value="0">
    <sp-label slot="label">Example #3 (min: 0, max: 500)</sp-label>
</sp-slider>
<sp-slider min="0" max="500" value="4">
    <sp-label slot="label">Example #4 (min: 0, max: 500)</sp-label>
</sp-slider>
<sp-slider min="0" max="500" value="5">
    <sp-label slot="label">Example #5 (min: 0, max: 500)</sp-label>
</sp-slider>
</body>
</html>

Here is a video that demonstrates the issue as well:

2

My experience is that the slider handle jumps to the far left when it gets sent a value that it can’t display in it’s given range. I’m not sure how your are sending slider values to the slider in your video, but you might want to console.log them out as they’re generated to make sure they’re within range. Also, sending a value of zero to the slider has been problematic in the past and I don’t know if this has been corrected. When a slider gets set to zero programmatically, I use the following code:

document.getElementById("mySlider").setAttribute("value", 0);

Finally, make sure you’re not sending “string” values to the slider. “Number” values are all it accepts, I think.

Not sure any of this will help, but just sharing some slider experiences.

1 Like
3

You can actually reproduce the issue I describe without any JavaScript code or code interaction at all.

Just add the following slider to index.html:

<sp-slider min="0" max="500" value="0">
    <sp-label slot="label">Example</sp-label>
</sp-slider>

Load it up in Photoshop, click the slider handle and slowly drag it to the right.
You’ll see it move left initially before snapping to where it should be under the mouse cursor.

4

I tried this with one of my sliders and was not able to replicate the problem. Here’s my code:

<sp-slider size="m" id="mySlider" min="0" max="500" value="0" ></sp-slider>

I’m NOT using the sp-label element. I’m also using some additional attributes in the slider’s description like “size”. Maybe try some of these formatting variations to see if there is any difference.

5

No difference unfortunately.

The top slider is my example and the bottom slider is your example.

6

You might try creating a eventListener for “input” and then logging out the results as you move the slider to see what numbers are being generated as you move the slider.

document.getElementById("mySlider").addEventListener("input", (event) => { 
console.log (document.getElementById("mySlider").value);
});

You need some info or clues as to what is going on and the console can provide that sometimes.