Slider to stop moving out of screen when the page is zoomed in mobile sites

Question

I am adding a QapTcha pluggin into my website, I am using jquery.ui.touch-punch.min.js. However, when I zoom into a page from a mobile site and I drag my slider left, it moves out of the bar, which it isn't supposed to do. I have attached pictures to give an idea of whats going on.

The problem occurs when you zoom into the page and you swipe the scroll bar it moves left out of the page as you can see in the 3rd image. This is my code:

 Slider.draggable({

                containment: bgSlider,
                axis: 'x',
                stop: function (event, ui) {
                    if (ui.position.left > 123) {
                        Slider.draggable('disable').css('cursor', 'default');
                        inputQapTcha.val("");
                        TxtStatus.css({ color: '#307F1F' }).text(opts.txtUnlock);
                        Icons.css('background-position', '-16px 0');
                        //form.find('input[type=\'submit\']').removeAttr('disabled');
                        $(opts.buttonLock).removeAttr('disabled');
                        ///Show a fornm
                        if ($(opts.buttonLock).attr("show")) {
                            $($(opts.buttonLock).attr("show")).css("display", "block");
                            $("#QapTcha").fadeOut(500);
                        }
                        else if (opts.buttonLock == 'input[name="SendMail"]') {
                            $(opts.buttonLock).bind("click", function () {
                                AuroraJS.Modules.SendMail(this);
                            });
                        }
                        else if (opts.buttonFunc != "") {
                            $(opts.buttonLock).bind("click", function () {
                                opts.buttonFunc();
                            });
                        }
                    }
                }
            });

How I can prevent it from moving out of the bar when the page is zoomed into?

Answer 1

A link to a working example of the issue would help in resolving the issue.

From as far I can see, the only thing I could think of is that something might go wrong with positioning. You could try resolving this by adding position: relative; to the slider container.