Checkbox requirements for random generator not going into sum

I have a password generator that when you hit generate, you get a password. It has 4 options with 0.5 chance to change a character generated at length if checked. When I add the checkboxes for NUMBERS and SYMBOLS it stops working.

const generateBtn = document.getElementById('generate')
const passwordDisplay = document.getElementById('passwordInput')

const checkUpper = document.getElementById('checkUppercase')
const checkLower = document.getElementById('checkLowercase')
const checkNumber = document.getElementById('checkNumber')
const checkSymbol = document.getElementById('checkSymbol')

function rangeSlider() {
  let slider = document.getElementById('slider')
  let output = document.getElementById('numCount')
  output.innerHTML = slider.value
  slider.oninput = function() {
    output.innerHTML = this.value
  }
}

function generatePassword() {
  passwordArray = []
  let length = document.getElementById('slider').value
  let password = ''
  let upper = checkUppercase.checked
  let lower = checkLowercase.checked
  let number = checkNumber.checked
  let symbol = checkSymbol.checked

  let characters = `abcdefghijklmnopqrstuvwxyz`;
  let uppercaseCharacters = `ABCDEFGHIJKLMNOPQRSTUVWXYZ`

  if (upper && Math.random() < 0.5) {
    characters += uppercaseCharacters
  }
  if (lower && Math.random() < 0.5) {
    characters = characters.replace(uppercaseCharacters, '')
  }
  if (number && Math.random() < 0.5) {
    characters += `0123456789`
  }
  if (symbol && Math.random() < 0.5) {
    characters += `!@#$%^&*()_+~\`|}{[]\:;?><,./-=`
  }

  let charactersLength = characters.length;
  let counter = 0;

  while (counter < length) {
    password += characters.charAt(Math.floor(Math.random() * charactersLength))
    counter++
  }

  passwordDisplay.value = password

}

rangeSlider()
generateBtn.addEventListener('click', generatePassword)

I'm not sure when I add the two variables of number and symbol, it stops generating.Thank you for any help