# Moving Page Number tool in header

**URL:** <https://pdfjs.community/t/moving-page-number-tool-in-header/131>\
**Category:** Technical Support\
**Created:** [July 13, 2020, 7:11am UTC](https://pdfjs.community/t/moving-page-number-tool-in-header/131 "2020-07-13T07:11:25Z")\
**Posts on this page:** 1\
**Showing post:** 3

<div class="post-metadata">

**Author:** ![abhishek11.maurya199](https://avatars.discourse-cdn.com/v4/letter/a/ed655f/32.png) [@abhishek11.maurya199](https://pdfjs.community/u/abhishek11.maurya199)\
**Post date:** [July 14, 2020, 2:14pm UTC](https://pdfjs.community/t/moving-page-number-tool-in-header/131/3 "2020-07-14T14:14:02Z")

</div>

I have created a custom element  
for page number and using prepopulate the value with current page number  
and total page number. But how can i change the page number value  
when i change page using scroll down or going to next page. Is there any event  
we get when page changes so that i can update my value in custom element?

If i am having the wrong approach please correct me? Below is the code for reference.

header.push({

```
  type: 'customElement',

  title:'Page',

  render: function() {

    var slider = document.createElement('input');

    slider.type = 'text';

    slider.value = currentPage;

    slider.tabindex="-1";

    slider.style="width: 11.5px; border:none; font-size: medium; margin-top: -1px;";

    slider.oninput = function() {

      console.log('---oninput---');

    };

    slider.addEventListener("keyup", function(event) {

      console.log('---keyup---');

    });

    var pageNum = document.createElement('input');

    pageNum.type = 'text';

    pageNum.value = " / " + TotalPageNumber;

    pageNum.tabindex="-1";

    pageNum.style="width: 30px; border:none; font-size: medium; margin-top: -1px;";

    pageNum.oninput = function() {

      console.log('---oninput---');

    };

    pageNum.addEventListener("keyup", function(event) {

      console.log('---keyup---');

    });

    var form = document.createElement('div');

    form.style="display: flex; border-radius: 10px;padding: 10px;cursor: pointer;";

    form.appendChild(slider);

    form.appendChild(pageNum);

    return form;

    // return slider;

  }

});

```

Regards  
Abhishek Maurya

---

_[View the full topic](https://pdfjs.community/t/moving-page-number-tool-in-header/131)._