Spectrum Slider question

Photoshop UXP Plugin API
1

Hello all, simple question here - I’m trying to set up a spectrum slider with the Editable property enabled as seen in this image from the docs:

344×224 1.09 KB

Does anyone know what the html code is to get that numeric entry text box next to the slider? I’ve tried various uses of the “is editable” property but had no luck. Thank you!

1 Like
2

Hi,
If you are using UXP and not React, you might want to take a look at this page

In UXP, sliders are implemented in a basic way and if you want to edit the value by hand then you will have to built that yourself. It’s quite straightforward. Mind you, you cannot use jQuery with UXP so you have to stick to Vanilla Javascript.

1 Like
3

Yep, this does require a little bit of JavaScript to glue things together, but it’s not too bad. If you’re using React, it’s even easier to manage (IMO), but I’ll assume that for now you’re just wanting non-React code.

HTML:

<div class="sliderWithNumber">
  <sp-slider min=0 max=100 value=50 show-value="false">
    <sp-label slot="label">Size</sp-label>
  </sp-slider>
  <sp-textfield type="number" value=50></sp-textfield>
</div>

CSS:

.sliderWithNumber {
    display: flex;
    flex-direction: row;
    padding: 0.5em;
}
.sliderWithNumber sp-textfield {
    flex: 0 0 5em;
    margin-top: 2em;
}
.sliderWithNumber sp-slider {
    flex: 1 1 auto;
    margin-right: 1em;
}
.sliderWithNumber sp-slider:focus {
    outline: 2px solid #2E87E8;
    outline-radius: 3px;
}

JS:

document.addEventListener("input", evt => {
    const target = evt.target;
    if (!target.parentElement) return;
    if (!target.parentElement.className === "sliderWithNumber") return;
    if (target.tagName === "SP-SLIDER") target.nextElementSibling.value = "" + target.value;
    if (target.tagName === "SP-TEXTFIELD") target.previousElementSibling.value = "" + target.value;
});

Screenshot:

image
image504×722 12.2 KB

2 Likes
4

I confirm that React makes things a bit easier – I suggested non-linear sliders a while ago but in the end it was not too difficult to stick an <sp-slider> and an <sp-textfield> together in a React component. It would be a nice topic for one of the UXP videos now that you make me think about it! :slight_smile:

1 Like
5

Thanks for the responses Pierre, Kerri and Davide. Your code worked perfectly Kerri, cheers :pray:

6

This slider is great can anyone put the way to change the layer opacity. Thank you

1 Like