Linking Photoshop UXP Slider

Question

I'm currently trying to link a spectrum slider's value to a function. So far the function set's the layers opacity though batchplay and this works fine. I'm struggling to find information on how to get the sliders value on change, and then run the function with the updated value

Currently the function is as below. The slider can trigger an alert on moving it.

HTML

<sp-slider id="midtoneSlider" min="0" max="100" value="100"></sp-slider>

UXP

document.getElementById("midtoneSlider").addEventListener("input", //not sure how to get the current value);


async function setMidtoneOpacity() {
   var sliderValue = //get value of slider
   const result = await customFunction1(sliderValue);
}

async function customFunction1(layerOpacity) {
   const result = await batchPlay(
   [
      {
         "_obj": "select",
         "_target": [
            {
               "_ref": "layer",
               "_name": "MidtoneColour"
            }
         ],

      },
      {
         "_obj": "set",
         "_target": [
            {
               "_ref": "layer",
               "_enum": "ordinal",
               "_value": "targetEnum"
            }
         ],
         "to": {
            "_obj": "layer",
            "opacity": {
               "_unit": "percentUnit",
               "_value": layerOpacity
            }
         },
         "_isCommand": true,
         "_options": {
            "dialogOptions": "dontDisplay"
         }
      }
   ],{
      "synchronousExecution": false,
      "modalBehavior": "fail"
   });
   }

There is the code below but I'm no sure how to implement it.

document.querySelector(".yourSlider").addEventListener("input", evt => {
    console.log(`New value: ${evt.target.value}`);
})

Or in the spectrum documentation

const slider = document.querySelector('sp-slider');

const endListener = ({ target }) => {
    target.addEventListener('input', startListener);
    target.removeEventListener('input', streamListener);
    target.removeEventListener('change', endListener);
    console.log(target.value);
};

const streamListener = ({ target }) => {
    console.log(target.value);
};

const startListener = ({ target }) => {
    target.removeEventListener('input', startListener);
    target.addEventListener('input', streamListener);
    target.addEventListener('change', endListener);
    console.log(target.value);
};

slider.addEventListener('input', startListener);

score 0 · Answer 1 · answered Mar 22 '21 at 06:13

I found out you need to use document.querySelector("#//your slider id").value to call on the slider. Then changed the listener from "input" to "change"

The code I have working correctly is

document.getElementById("midtoneSlider").addEventListener("change", setMidtoneOpacity);


async function setMidtoneOpacity() {
   var sliderValue = document.querySelector("#midtoneSlider").value
   const result = await customFunction1(sliderValue);
}

async function customFunction1(layerOpacity) {
   const result = await batchPlay(
   [
      {
         "_obj": "select",
         "_target": [
            {
               "_ref": "layer",
               "_name": "MidtoneColour"
            }
         ],

      },
      {
         "_obj": "set",
         "_target": [
            {
               "_ref": "layer",
               "_enum": "ordinal",
               "_value": "targetEnum"
            }
         ],
         "to": {
            "_obj": "layer",
            "opacity": {
               "_unit": "percentUnit",
               "_value": layerOpacity
            }
         },
         "_isCommand": true,
         "_options": {
            "dialogOptions": "dontDisplay"
         }
      }
   ],{
      "synchronousExecution": false,
      "modalBehavior": "fail"
   });
   }

Linking Photoshop UXP Slider

1 Answers1