Javascript - How to calculate pagination range number for each page of dynamic dataset?

Question

Im building an automatic pagination calculator that calculates offset and range according to user input. A very simple task but my algorithm is off because of the offset starting at 0 in the for loop. No matter how you put it, starting at 0 or 1, the numbers will always be off. How can I make this work?

For example entering 100 total items and 25 per page is off by 4 :

page : 1 | offset : 0 | range : 1 - 25 | total : 24
page : 2 | offset : 25 | range : 26 - 50 | total : 24
page : 3 | offset : 50 | range : 51 - 75 | total : 24
page : 4 | offset : 75 | range : 76 - 100 | total : 24

//event listener
var button = document.getElementById('submit');

//click
button.addEventListener('click',function(){
  
//div results  
var results = document.getElementById('results');
  
//clear div before appending
results.innerHTML= '';

//grab value
var total_items = document.getElementById('total_items').value;//331165139
var per_page =  document.getElementById('items_per_page').value;

//total pages
var total_pages = Math.ceil(total_items/per_page);

//iterate over pages
for(var x = 0; x<total_pages; x++){

//get page
var page = x+1;

//offset
var offset = (per_page * page) - per_page;

//range from
var from = ((page - 1) * per_page) + 1 ;

//range to
var to = per_page * page
var range = from + ' - ' + to;

//creating divs
var newDiv = document.createElement('div');
newDiv.innerHTML =  'page : ' + page + ' | offset : ' + offset + ' | range : ' + range + ' | total : ' + (to-from);
results.appendChild(newDiv);
 
}

})

<h3>Pagination Calculator</h3>
<hr>
<p>Calculates pagination automatically in the console</p>
<p>*Pop open the console</p>
<hr>
<label>total items </label>
<input id="total_items">
<label>limit per page</label>
<input id="items_per_page">
<button id="submit">Submit</button>
<hr>
<div id="results"></div>