How to make a colourful interactive GUI spectrum slider?

Hello, I want to make a colorful spectrum where the user can use a slider to control the input value. Input values go from 20 to 1112.5 with a resolution of 0.1. every input value corresponds to an output value which I have stored. I know how to make the user type their input value and return the corresponding output but I just have no idea how to make the GUI spectrum slider. Every input corresponds to a percentage (i.e. the output is a percentage) and I want the shading of the spectrum to be greener as it gets closer to 100% and more red as it gets closer to 0%.

Can someone help me please? :)

[Jan]

"from 20 to 1112.5 with a resolution of 0.1" means 10925 steps. Your monitor has less pixels. It is impossible to let a user interact with a GUI with subpixel resolution.

I'm not really sure what a "spectrum slider" is.

[Hannah]

hi Jan,

Thank you for giving me a sanity check, I feel so silly now. You're right the resolution is too high. Also I made up the phrase "spectrum slider".

So what I was trying to describe as a "spectrum slider" is something like the image below:

where the user can slide the bar until it reaches the value they desire.

Is it possible to do something like this with a reasonable resolution? I just want to know the concept. We could even say that I want numbers from 1 to 100 with a resolution of 0.5.

[Jan]

There is no slider object, which let you choose a background image. But you can move an object on top of an axes. In older Matlab versions the colormapeditor was a useful example.

[Hannah]

i see, thanks

Answer 1

[Mohammad Sami]

While there is no slider object which have the spectrum as the background, you can however achieve this effect by layering uislider on top of an uiimage with spectrum. I used a gridlayout, but you can also set the position property. However in case of resize you will then have to set the position again. Therefore using a gridlayout would be preferable.

a = uifigure;
g = uigridlayout(a,[5 5]);
b = uiimage(g,'ImageSource','spectrum.png','ScaleMethod','fill');
b.Layout.Row = 2;
b.Layout.Column = 2;
c = uislider(g);
c.Layout.Row = 2;
c.Layout.Column = 2;