# Positionning Difficulties with Custom Slider in Ignition Vision

**URL:** <https://forum.inductiveautomation.com/t/positionning-difficulties-with-custom-slider-in-ignition-vision/69216>\
**Category:** Ignition\
**Tags:** vision\
**Created:** [January 31, 2023, 4:17pm UTC](https://forum.inductiveautomation.com/t/positionning-difficulties-with-custom-slider-in-ignition-vision/69216 "2023-01-31T16:17:19Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Emile\_Laplante](https://avatars.discourse-cdn.com/v4/letter/e/c57346/32.png) [@Emile\_Laplante](https://forum.inductiveautomation.com/u/Emile_Laplante)\
**Post date:** [January 31, 2023, 4:17pm UTC](https://forum.inductiveautomation.com/t/positionning-difficulties-with-custom-slider-in-ignition-vision/69216/1 "2023-01-31T16:17:20Z")

</div>

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 :

[![](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/0/80c606f78f6a6ebd02f16ebb98c1e2c962fc872a.jpeg "ignition vision slider") ](https://www.youtube.com/watch?v=sjBw1PpVn-0)

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

https://codepen.io/shashank_coder/embed/preview/jOqxOpK?default-tabs=css%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=jOqxOpK

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

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/5/25a25a24ea61b5ade05128acea523c6d57185764.png)

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:

[![](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/6/b6b517d3eae0d1161477867275611f1d19ac3a5d.jpeg "ignition custom slider template view") ](https://www.youtube.com/watch?v=zb7kuhIopn8)

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:

[![](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/b/ab87085274e90e46bc8f8c78fc3e4a10eb7db54c.jpeg "ignition slider in real view") ](https://www.youtube.com/watch?v=F5clEid10V8)

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!

---

<div class="post-metadata">

**Author:** ![Eric\_Byrd](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/eric_byrd/32/43488_2.png) [@Eric\_Byrd](https://forum.inductiveautomation.com/u/Eric_Byrd)\
**Post date:** [February 7, 2023, 10:30pm UTC](https://forum.inductiveautomation.com/t/positionning-difficulties-with-custom-slider-in-ignition-vision/69216/2 "2023-02-07T22:30:24Z")

</div>

Hi [Emile\_Laplante](https://forum.inductiveautomation.com/u/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/](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.

---

<div class="post-metadata">

**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\
**Post date:** [February 8, 2023, 3:49am UTC](https://forum.inductiveautomation.com/t/positionning-difficulties-with-custom-slider-in-ignition-vision/69216/3 "2023-02-08T03:49:14Z")

</div>

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

> [@Slider Object customization](https://forum.inductiveautomation.com/t/slider-object-customization/64005/4):
>
> 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.