<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");
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.