Pagination Slider

A slider-based pagination control. Ideal for large datasets where the exact page number matters less than the position. Shows prev/next buttons and a draggable slider with a value bubble. The examples compose the item-range readout separately. The page binding commits after a 150 ms debounce.


Basic

Bind page and pass total + pageSize. The component computes total pages as max(1, ceil(total / pageSize)). Use a positive pageSize, and derive and render the item range in your application.

1/8 · 1–20 of 142


Sizes

Three sizes: normal, compact, small.

Normal

1/20 · 1–25 of 500

Compact

1/20 · 1–25 of 500

Small

1/20 · 1–25 of 500