Positionning Difficulties with Custom Slider in Ignition Vision


For a project, I want to create a a custom slider template. I used the ignition vision built-in slider, but with a touch screen, it is not super responsive because the cursor of the slider don't go all the way to a position when a part of the slider is touched :

I would like to have a slider that reacts like this CSS range slider :

I'm able to make a custom slider template with two rectangles :

I make a script on mouse clicked event and on mouse drag event. I change the width of the green rectangle accroding to the event X value :

event.source.parent.getComponent('Rectangle 1').relWidth = event.x

The slider works great when I try it in preview mode in the template folder:

But when I place this template in a windows and I run the project, the position given by event.x accumulate an error furder I displace the slider. It's like the x position given by the event is less what I would have expected (If I touch the end of the white rectangle which has a width of 500 pixels, the event.x returns 450 pixels:

I can mitigate this by applying a gain to the the green rectangle width that I found experimently :

event.source.parent.getComponent('Rectangle 1').relWidth = event.x * GAIN

But this is not very modular because the gain will have to change if I resize the template.

So why the position given by event.x is different then the expected position when I place the slider in a window? I suspect that there is something with the window resizing when the project is running.

Thank you!

Hi Emile_Laplante,

There could be a lot of different things that factor into how your slider is behaving. I would suggest reaching out to our support department via the link below:

Be sure to include all the details you included in this post as well as any progress or changes you've made so far.

Quite a while back, I posted a tutorial on creating custom sliders. Perhaps it will help you:

Note in subsequent posts how @gpellicelli uses a linear scale as the base component instead of an actual slider. I feel that this is an improvement over what I initially did. He also includes a downloadable example in his post.