Slider test

Photoshop
, ,
1

Hi everyone,
I am trying to continuously update data while moving the slider handle but, I have a small problem with mousedown followed mousemove eventListeners applied to the slider.
When I hoover the mouse on the slider without moving it, the eventListener continuously repeats its commands.
Could someone analyse the following and point where I am mistaken?

Manifest:

Blockquote
{
“manifestVersion”: 4,
“id”: “SliderTest”,
“name”: “SliderTest”,
“version”: “1.0.0”,
“main”: “index.html”,
“host”: {
“app”: “PS”,
“minVersion”: “23.0.0”,
“data”: {
“apiVersion”: 2
}
},
“requiredPermissions”: {
“clipboard”: “readAndWrite”,
“launchProcess”: “request”,
“allowCodeGenerationFromStrings”: true,
“localFileSystem”:“fullAccess”,
“network”: {
“domains”: [“alchemist.bereza.cz”]
}
},
“entrypoints”: [
{
“type”: “command”,
“id”: “commandFn”,
“label”: {
“default”: “Show A Dialog”
}
},
{
“type”: “panel”,
“id”: “SliderTest”,
“label”: {
“default”: “SliderTest”
},
“minimumSize”: {“width”: 300, “height”: 60},
“maximumSize”: {“width”: 300, “height”: 60},
“preferredDockedSize”: {“width”: 300, “height”: 60},
“preferredFloatingSize”: {“width”: 300, “height”: 60},
“icons”: [
{“width”:23,“height”:23,“path”:“icons/dark.png”,“scale”:[1,2],“theme”:[“darkest”,“dark”,“medium”]},
{“width”:23,“height”:23,“path”:“icons/light.png”,“scale”:[1,2],“theme”:[“lightest”,“light”]}
]
}
],
“icons”: [
{“width”: 48,“height”: 48,“path”: “icons/plugin-icon.png”,“scale”: [1,2],“theme”: [“darkest”,“dark”,“medium”,“lightest”,“light”,“all”],“species”: [“pluginList”]}
]
}

HTML: note: I had to remove “<” to show all the file

!DOCTYPE html>

html>
head>
meta charset=“utf-8”>

<link rel="stylesheet" href="./vars/dist/spectrum-global.css">
<link rel="stylesheet" href="./typography/dist/index-vars.css">
   <link rel="stylesheet" href="./page/dist/index-vars.css">
<link rel="stylesheet" href="./slider/dist/index-vars.css">
<link rel="stylesheet" href="./button/dist/index-vars.css">
<link rel="stylesheet" type="text/css" href="./styles.css">
<link rel="stylesheet" type="text/css" href="./jquery-ui.css">
<script src="./jquery.min.js"></script>
<script src="./index.js"></script>

head>
body>

sp-action-button class=“BIButton2” style=“position: absolute; left: 10px; top: 15px; width: 280px; height:10px; border-radius:3px;”>

div class=“spectrum-Slider” style="position: absolute; top: 4px; left: 10px; width: 280px; ">
sp-slider id=“SatSlider” min=“1” max=“100” value=“100” title=“Saturation adjustment”>

/div>

button class=“darkGray” id=“btn_reload” style=“position: absolute; left: 225px; top: 28px; height: 20px; width: 60px; background:linear-gradient(to bottom, #ff4040 10%, #550000 100%);”>Rf

/body>
/html>

JS:

Blockquote

// ################## sliders ####################

var count = 0;
document.getElementById(“SatSlider”).addEventListener(“mousedown”, evt => {
console.log( “Mouse down”, count);
document.getElementById(“SatSlider”).addEventListener(“mousemove”, evt => {
count = count + 1;
console.log( "Number of iterations ", count);

});
});

document.getElementById(“btn_reload”).addEventListener(“click”, async function () {await location.reload()});

2

The “mousemove” event is just that. The mouse button does NOT have to be down to call the event. If you only want your “mousemove” event to only be called when the mouse is down, you’ll need to make a variable to track when this is true and false and make sure the “mousemove” function only gets called when the mouse down variable is true.

3

Thanks, I will look into it