# Create Slider component with mouseDragged **URL:** \ **Category:** Ignition\ **Created:** [November 3, 2018, 8:30am UTC](https://forum.inductiveautomation.com/t/create-slider-component-with-mousedragged/20512 "2018-11-03T08:30:13Z")\ **Posts on this page:** 1\ **Page:** 1
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [November 3, 2018, 8:30am UTC](https://forum.inductiveautomation.com/t/create-slider-component-with-mousedragged/20512/1 "2018-11-03T08:30:13Z")
Hi I try to create a new slider in ignition with mouseDragged event handler to change the position of my slider. I use this code to slide my drag icon in mouseDragged event handler: # orignal x position in template for 0% oriX = 7.0 # Get the new mouse dragged position x = event.x if x - oriX \<= 300 and x - oriX \>= 0: system.gui.transform(event.source, x) event.source.parent.Tag = (x - oriX)/3 and following code in propertychange event on template to update icon position regard input tag: oriX = 7.0 system.gui.transform(event.source.getComponent('Grapper'), event.source.Tag\*3 + oriX) I face two major problem: 1 - When I dragged the slider icon the mouse snap to the left edge of the icon instead of middle even I click on middle og the icon. I check and see the center point of the icon is in the center. This cause I have always a small error related to my gauge. 2 - Scaling the slider template cause every thing get messy because I use absolute value position but I don't have any idea to fix it. Can someone give some help to current it? [MyFirst\_Slider Type A\_2018-11-03\_1138.proj](https://us1.discourse-cdn.com/inductiveautomation/original/2X/0/06d94ddda6c37f9702a3806d7cbbd844891861c0.proj) (12.7 KB) ![](https://us1.discourse-cdn.com/inductiveautomation/original/2X/d/df91e9d749222d83ce2dd8b8344e32475045d34e.jpg) Thanks.