# Panel

[component-header:sl-pagination]

Pagination is a component that lets the user select among pages for a data result.

The component offers the user the ability to go previous or next page. It also allows the user to select a specific page from a subset of the pages.

```html preview
<sl-pagination total-pages="10"></sl-pagination>
```

### Listening to event

The component emits a pageChange event whenever the page changes.

```html preview
<sl-pagination id="p-1" total-pages="5"></sl-pagination>
<script>
  const p = document.querySelector('#p-1');

  p.addEventListener('pageChange', event => {
    const selectedPage = event.detail;
    console.log('select page: ', selectedPage);
  });
</script>
```

[component-metadata:sl-pagination]