I have tested this item 🔴 unsuccessfully on 59b08bb

All the layout options work except for the slider. For the slider, it appears, but it doesn't show the hue as expected. I'll add a screenshot in the next comment.

Slider screenshot. There's no color behind it so it looks empty.

Even as I didn't change something on the JS side, can you rebuild it with npm or download a new build from here? Because on my dev server it worked after a npm ci.

It is reproducible with the prebuilt package.

The linear-gradient values are different.

Fields:
<input type="range" min="0" max="360" class="form-control color-slider" id="hue-slider" data-type="hue" style="background: rgba(0, 0, 0, 0) linear-gradient(90deg, rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255)) repeat scroll 0% 0%; appearance: none;">

Administrator Template Styles:
<input type="range" min="0" max="360" class="form-control color-slider" id="hue-slider" data-type="hue" style="background: rgba(0, 0, 0, 0) linear-gradient(90deg, rgb(83, 19, 19), rgb(83, 19, 19), rgb(83, 38, 19), rgb(83, 57, 19), rgb(83, 77, 19), rgb(70, 83, 19), rgb(51, 83, 19), rgb(32, 83, 19), rgb(19, 83, 25), rgb(19, 83, 45), rgb(19, 83, 64), rgb(19, 83, 83), rgb(19, 64, 83), rgb(19, 45, 83), rgb(19, 25, 83), rgb(32, 19, 83), rgb(51, 19, 83), rgb(70, 19, 83), rgb(83, 19, 77), rgb(83, 19, 57), rgb(83, 19, 38), rgb(83, 19, 19), rgb(83, 19, 19)) repeat scroll 0% 0%; appearance: none;">

Found the issue, can you guys test again? Ignore the conflict, will disappear when 4.2 got the commits from 4.1 merged.

Before making a selection:

After making a selection and saving:

The slider shows the colors based on the initial color. So when you change it the range changes. Honestly I'm not much into this, perhaps @dgrammatiko can shed here some light why this happens. It is the same when you give it a default color.

@laoneo I think you are missing what @Quy is saying.

Don't think so as the color range of the slider is based on the available color. So when you choose one, the range changes. So what I do not understand is how to have a fixed color range which works in all situations.

perhaps @dgrammatiko can shed here some light why this happens.

I need to debug it but it seems that the removal of the $control is not right. In the advanced this var controls which type of value should be accepted/outputed (but might be wrong, this is just by reading the code).

About the custom fields and particularly the slider version: it will never work correctly as the JS and the HTML have both IDs hardcoded and you can't really have one ID for multiple fields, will never work (not something you did here and also I had criticised that when this field was introduced but as usual I was ignored)

Would be great if you can help me out here.

but as usual I was ignored

Your removed jQuery from core, what did you expect then 🤣

Your removed jQuery from core, what did you expect then

And that's my punishment for keeping the project somewhat competitive, fair enough 🙄

Joke aside, I'm kinda busy today, I'll try to sneak some time this weekend, unless someone is faster