Slider Question

Photoshop UXP Plugin API
1

So I have sliders working perfectly outside of one issue. I need the value of sliders to remain in effect when I use another slider.

Example, I need to be able to adjust Blend If on the darks, and on the brights. Since we don’t have split sliders to my knowledge I’m curious how to go about this.

My thought is that I would implement multiple event listeners, I’m not sure how to do this.

document.getElementById("blendifdarkSlider").addEventListener("mouseup", evt => {

   console.log(`blendIF value: ${evt.target.value}`);

   batchPlay([

      {
         "_obj": "set",
         "_target": [
            {
               "_ref": "layer",
               "_enum": "ordinal",
               "_value": "targetEnum"
            }
         ],


         "to": {
            "_obj": "layer",
            "blendRange": [
               {
                  "_obj": "blendRange",
                  "channel": {
                     "_ref": "channel",
                     "_enum": "channel",
                     "_value": "red"
                  },
                  "srcBlackMin": 0,
                  "srcBlackMax": 0,
                  "srcWhiteMin": 255,
                  "srcWhiteMax": 255,
                  "destBlackMin": 0,
                  "destBlackMax": evt.target.value,
                  "destWhiteMin": 255,
                  "desaturate": 255
               },

               {
                  "_obj": "blendRange",
                  "channel": {
                     "_ref": "channel",
                     "_enum": "channel",
                     "_value": "grain"
                  },
                  "srcBlackMin": 0,
                  "srcBlackMax": 0,
                  "srcWhiteMin": 255,
                  "srcWhiteMax": 255,
                  "destBlackMin": 0,
                  "destBlackMax": evt.target.value,
                  "destWhiteMin": 255,
                  "desaturate": 255
               },
            ],

            "layerEffects": {
               "_obj": "layerEffects",
               "scale": {
                  "_unit": "percentUnit",
                  "_value": 200
               }
            }
         },
         "_isCommand": true
      },


   ], {})

})
2

Can’t you just grab the value of the other slider as part of your “mouseup” event?

valueOfOtherSlider = document.getElementById("otherSlider").value;
3

I sure do appreciate you right now… So much easier than I was making that out to be!

4

An easy slider reset that I came up with, if there is a better solution I’m all about it. I think it would be neat to read the layers value and set the slider to that value when selecting the layer. I’ll work on this later.

If this can help anyone out with sliders here is what I have :slight_smile:

HTML

    <sp-slider id="opacitySlider" min="0" max="100" value="100" step="5" autocomplete="off">
      <sp-label slot="label">Opacity</sp-label>
    </sp-slider>

JS

document.getElementById("opacitySlider").addEventListener("mouseup", evt => {

   //console.log(`Opacity value: ${evt.target.value}`);

   batchPlay([

      {
         "_obj": "set",
         "_target": [
            {
               "_ref": "layer",
               "_enum": "ordinal",
               "_value": "targetEnum"
            }
         ],
         "to": {
            "_obj": "layer",
            "opacity": {
               "_unit": "percentUnit",
               "_value": evt.target.value
            }
         },
         "_isCommand": true
      }


   ], {})

   document.addEventListener("mouseleave", reset);

   function reset() {
      document.getElementById("opacitySlider").value = "100";
   }

});
5 
async function getLayerOpacity() {

  const result = await require("photoshop").action.batchPlay(

    [
       {
          _obj: "get",
          _target: [
             {
                _property: "opacity"
             },
             {
                _ref: "layer",
                _name: "YourLayerName" // can get current or set to whatever you want
             },
          ],
       }
    ],{
       synchronousExecution: true,
    });
    console.log(result)
document.getElementById("YourSlider").value = (result)
}