Recipe 7.5

Constraining a Number Input

Demo

Quantity

Code

JavaScript

function formatPriceRange(prices) {
  const format = new Intl.NumberFormat(navigator.language, { 
    style: 'currency',

    // the currency code is required when using `style: currency`
    currency: 'USD' 
  });
  return format.formatRange(
    // find the lowest price in the array
    Math.min(...prices),

    // find the highest price in the array
    Math.max(...prices)
  );
}

HTML

<label for="quantity">Quantity</label>
<input type="number" name="quantity" id="quantity" min="1" max="10">