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.