2D UI CUSTOM Slider Handle to be dragged to the right

Help & Support
1

I thought it was going to be easy but way more difficult than expected, what I am doing is mouse dragging a UI image to the right and when it goes right scale of the 3D entity increases,I cannot find anything about dragging a UI 2D element all i found is this 2018 post
this PlayCanvas 3D HTML5 Game Engine

Now it works all right. The only issue is there is sooooo much code and secondly, when you click on the image it jumps to the right and then gets dragged, how to fix this z

var UISlider = pc.createScript('uiSlider');

UISlider.attributes.add('handle', {type: 'entity', default: null, title: 'Handle'});
UISlider.attributes.add('axis', {type: 'string', default: "y", title: 'Axis', description: 'lock drag to axis: x, y or xy'});

UISlider.prototype.postInitialize = function() {
    
    if( ! this.handle ) this.handle = this.entity.parent.findByName("UISliderHandle");
    
    if( this.handle ) this.addHandleListeners();
    else throw new Error( "UISlider has no handle" );
    
    this.isDragging = false;
    this.touchId = -1;

    this.mousePos = new pc.Vec3();
    
    this.anchorPos = this.handle.getLocalPosition().clone();
    
    this.screen = this.getUIScreenComponent();
};

UISlider.prototype.getUIScreenComponent = function() {
    return this.handle.element.screen.screen;
};

UISlider.prototype.addHandleListeners = function() {
    
    this.handle.element.useInput = true;
    
    this.handle.element.on(pc.EVENT_MOUSEDOWN, this.onPressDown, this);
    this.app.mouse.on(pc.EVENT_MOUSEUP, this.onPressUp, this);
    this.app.mouse.on(pc.EVENT_MOUSEMOVE, this.onPressMove, this);
        
    if( this.app.touch )
    {
        console.log("initing touches");
        this.handle.element.on(pc.EVENT_TOUCHSTART, this.onTouchStart, this);
        this.app.touch.on(pc.EVENT_TOUCHEND, this.onTouchEnd, this);
        this.app.touch.on(pc.EVENT_TOUCHCANCEL, this.onTouchEnd, this);
        this.app.touch.on(pc.EVENT_TOUCHMOVE, this.onTouchMove, this);
    }    
    
    this.on('destroy', function() {
        
        this.handle.element.off(pc.EVENT_MOUSEDOWN, this.onPressDown, this);
        this.app.mouse.off(pc.EVENT_MOUSEUP, this.onPressUp, this);
        this.app.mouse.off(pc.EVENT_MOUSEMOVE, this.onPressMove, this);

        if( this.app.touch )
        {
            this.handle.element.off(pc.EVENT_TOUCHSTART, this.onTouchStart, this);
            this.app.touch.off(pc.EVENT_TOUCHEND, this.onTouchEnd, this);
            this.app.touch.off(pc.EVENT_TOUCHCANCEL, this.onTouchEnd, this);
            this.app.touch.off(pc.EVENT_TOUCHMOVE, this.onTouchMove, this);
        }
    });
    
};

UISlider.prototype.onTouchStart = function(ev) {
    var touch = ev.changedTouches[0];
    this.touchId = touch.identifier;
    this.startDrag( ev.x, ev.y );
    ev.event.stopPropagation();
};
UISlider.prototype.onTouchMove = function(ev) {
    for(var i=0; i< ev.changedTouches.length; i++ ) 
    {
        var t = ev.changedTouches[i];
        if( t.id == this.touchId )
        {
            ev.event.stopPropagation();
            this.updateMove( t.x, t.y );
            return;
        }
    }
};
UISlider.prototype.onTouchEnd = function(ev) {
    for(var i=0; i< ev.changedTouches.length; i++ ) 
    {
        var t = ev.changedTouches[i];
        if( t.id == this.touchId )
        {
            ev.event.stopImmediatePropagation();
            this.touchId = -1;
            this.endDrag( t.x, t.y );
            return;
        }
    }
};


UISlider.prototype.onPressDown = function(ev) {
    ev.event.stopImmediatePropagation();
    this.startDrag(ev.x,ev.y);
};
UISlider.prototype.onPressUp = function(ev) {
    ev.event.stopImmediatePropagation();
    this.endDrag(ev.x,ev.y);
};
UISlider.prototype.onPressMove = function(ev) {
    this.updateMove(ev.x,ev.y);
    ev.event.stopImmediatePropagation();
};
        
UISlider.prototype.startDrag = function(x,y) {
    this.isDragging = true;
    this.setMouseXY(x,y);
};
UISlider.prototype.updateMove = function(x,y) {
    if( this.isDragging ) this.setMouseXY(x,y);
};
UISlider.prototype.endDrag = function(x,y) {
    this.isDragging = false;
    this.setMouseXY(x,y);
};
UISlider.prototype.setMouseXY = function(x,y) {
    this.mousePos.x = x;
    this.mousePos.y = y;
};

UISlider.prototype.update = function(dt) {
    this.updateDrag();
};

UISlider.prototype.updateDrag = function() {
    
    if( ! this.isDragging ) return ;    
    
    var device = this.app.graphicsDevice;
    var xOffs = this.handle.element.anchor.x*device.width;
    var yOffs = this.handle.element.anchor.y*device.height;
    var scale = 1/this.screen.scale;
    
    var screenX = (this.axis == 'x' || this.axis == 'xy') ? (this.mousePos.x-xOffs)*scale : this.anchorPos.x ;
    var screenY = (this.axis == 'y' || this.axis == 'xy') ? (-this.mousePos.y+yOffs)*scale  : this.anchorPos.y ;
    
    this.handle.setLocalPosition(screenX,screenY,0);
};
2

Can you help me on this @Leonidas @yaustar

3

So anyone stumbling upon it , here what I followed

basically using Play Canvas’s in-built scrollbar viewer , changing texture to customize it, and at last using value of scrollbar handle ,that was it