<div id="slidecontainer">
  <input type="range" min="1" max="6" value="3" class="slider" id="charityDonation">
  </div>
  
  <div id="donationInfo">
  <p id="donationAmount"></p>
  <p id="donationDescription"></p>
  </div>

#slidecontainer {
text-align:center;
}

.slider {
  -webkit-appearance: none;
  width:50%;
  height: 15px;
  border-radius: 5px;  
  background: #FFFFFF;
  border: 3px solid #99b9aa;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  }

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 40px;
  height: 40px;
  border-radius: 50%; 
  background:#99b9aa;
  cursor: pointer;
  display:inline-block;
}

.slider::-moz-range-thumb {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background:#99b9aa;
  cursor: pointer;
}



#donationDescription {
  
  text-align:center;
  margin-top:0px;
  font-family:Nunito;
  text-transform: lowercase;
  font-size:18px;
  color: #FFFFFF;
  text-transform: uppercase;
}

#donationAmount {
  
  text-align:center;
  font-family:Poppins;
  text-transform: uppercase;
  font-size:45px;
  color: #FFFFFF;
  margin-bottom:10px;
  
}

#slider label {
  position: absolute;
  width: 20px;
  margin-top: 20px;
  margin-left: -10px;
  text-align: center;
}

#donationInfo {
  margin:auto;
  background:rgb(153,185,170,0.8);
  padding-bottom:50px;
  padding-top:50px;
  margin-top:10px;
  border-radius:10px;
  width:50%;
  max-height:200px;
  min-height:200px;
}

var slider = document.getElementById("charityDonation");
var output = document.getElementById("donationDescription");
var donateOutput = document.getElementById("donationAmount")

output.innerHTML = slider.value; // Display the default slider value
 if (slider.value == 3) {output.innerHTML = "Fifty pounds donates towards...";
                        donateOutput.innerHTML = "£50"}
 

// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
  
 if (slider.value == 1) {output.innerHTML = "Ten pounds donates towards...";
                        donateOutput.innerHTML = "£10"} 
  
 else if (slider.value == 2){output.innerHTML = "Twenty pounds donates towards...";
                            donateOutput.innerHTML = "£20"}
  
 else if (slider.value == 3){output.innerHTML = "Fifty pounds donates towards...";
                            donateOutput.innerHTML = "£50"}
  
 else if (slider.value == 4){output.innerHTML = "One hundred pounds donates towards..."; 
                            donateOutput.innerHTML = "£100"}
  
 else if (slider.value == 5){output.innerHTML = "Two Hundred pounds donates towards...";
                            donateOutput.innerHTML = "£200"}
  
 else if (slider.value == 6){output.innerHTML = "Three hundred pounds donates towards...";
                            donateOutput.innerHTML = "£300"}
}

$(".slider").slider().slider("pips");