javascript - 链接 Photoshop UXP slider

Question

我目前正在尝试将频谱 slider 的值链接到一个函数。到目前为止，该功能通过批处理设置了图层不透明度，并且效果很好。我正在努力查找有关如何获取更改时的 slider 值，然后使用更新后的值运行该函数的信息

目前功能如下。 slider 可以在移动时触发警报。

HTML

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

用户体验

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"
   });
   }

有下面的代码，但我不知道如何实现它。

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

或者在频谱文档中

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);

Answer 1

我发现您需要使用 document.querySelector("#//your slider id").value 来调用 slider 。然后将监听器从“输入”更改为“更改”

我正确运行的代码是

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"
   });
   }