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

Feedback & Problem Solving
#1

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

page-selection-no-selection
page-selection-no-selection1840×1200 196 KB

Selection Examples
page-selection-selections
page-selection-selections1840×1200 199 KB

Disabled Selections and New Selections
page-selection-disabled-selections-new-selections
page-selection-disabled-selections-new-selections1840×1200 154 KB

#2

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.

#3
  • 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.