Positionning Difficulties with Custom Slider in Ignition Vision

[Emile_Laplante]

Hi,

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 :

ignition vision slider

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:

ignition custom slider template view

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:

ignition slider in real view

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!

[Eric_Byrd]

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:
https://inductiveautomation.com/support/

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

[justinedwards.jle]

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

Slider Object customization

Here is a tutorial for anybody who wants to replicate this: Create a container named CustomSliderComponent Use the rectangle tool to create a rectangle in the container named BackDrop that fills the entire container Add a slider to the container, name it CoreComponent, and resize the slider, so it completely fills the container Add a comma zero to the end of the background color to make the slider transparent: [image] Add four custom “Color” properties to the slider named backDropColor, leftOf…

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.