PNG Slider LAF || See Example

[Chazrox]

Just sharing this here on a new post so its easy to find if anyone else needs it.

I see alot of people trying to find a good work around for animating custom images for sliders. I've searched and tried a bunch of software myself and what I've found is that if you're not a graphics designer already, these programs might be a bit much of a learning curve. I've found a simpler solution that doesn't require any filmstrips but still allow you to use your custom designs.

Here's an example of making a slider with 2 png images.

This method requires 2 images:

A Slider Background Image:
.PNG

A Slider Cap Image:
.PNG

And a simple LAF function:

const var LAF = Content.createLocalLookAndFeel();
const var SliderBackground = LAF.loadImage("{PROJECT_FOLDER}SliderBackground.png", "Background");
const var SliderCap = LAF.loadImage("{PROJECT_FOLDER}SliderCap.png", "SliderCap");
const var Knob1 = Content.getComponent("Knob1");


LAF.registerFunction("drawLinearSlider", function(g, obj)
{
		var a = obj.area;

		var h = a[3] / 13;
		var y = a[3] - a[3] * obj.valueNormalized - (h + 10)  + (h + 10) * obj.valueNormalized;
			
		g.drawImage("Background", [0,0, 80, 560], 0, 0);		
		g.drawImage("SliderCap", [-10, y, a[2] + 20, h + 20],0 , 0);
});
Content.getComponent("Knob1").setLocalLookAndFeel(LAF);

STEPS:

1. Create your 2 images.
2. Place images in your projects 'Images' folder.
3. Create a knob/slider in 'vertical' mode.
4. Declare your slider knob.
5. Right-click and create a LAF
6. Paste this code as an example.
7. Press F5

You'll have to adjust the areas to your own needs. This is just my quick example.

Hope this helps some people!
Chee!

Working example:

BLESS!

[Chazrox]

@pcs800