HTML Elements or UI control to select a range of page numbers

Seeking some insight on what HTML Elements or UI control would be best suited to accomplish the following scenario. The ability to select a range of page numbers that could include a number of selections in a range that could include up to 200 pages. The selection would need to be available in a range, or as an individual selections at a time. The best scenario is to allow the user to single items, along with being able to shift-click a range of page numbers. Once page numbers have been selected and submitted. Then those pages can not be selected again for selection. I’ve mocked up an initial example with sort of button/icon selections. Are there alternative methods that I’m overlooking that may accomplish this better?

No Selection

Selection Examples

Disabled Selections and New Selections

Create a single select with options representing “All”, “Specific Range”, etc. If “Specific Range” is chosen, show separate input fields or another select for start and end pages.

  • Input type=“number” (min, max attributes): Define two separate input fields for the start and end page number, setting the min and max attributes to restrict the allowed range. This offers basic functionality but lacks visual clarity.