I have implemented the following code to update prices in my pricing table:
function updatePrices() {
var x = document.getElementById("prijs-small");
if (x.innerHTML === "17,50") {
x.innerHTML = "13,50";
} else {
x.innerHTML = "17,50";
}
var x = document.getElementById("prijs-medium");
if (x.innerHTML === "58") {
x.innerHTML = "30,50";
} else {
x.innerHTML = "58";
}
var x = document.getElementById("prijs-large");
if (x.innerHTML === "128,50") {
x.innerHTML = "61";
} else {
x.innerHTML = "128,50";
}
}.price-button {
background-color: white;
color: #012d5d;
padding: 10px 20px;
border-radius: 30px;
}<button class="price-button" onclick="updatePrices()">150/350</button>
<div id="prijs-small">17,50</div>
<div id="prijs-medium">58</div>
<div id="prijs-large">128,50</div>Now, I am looking to create a toggle switch that mimics this functionality, displaying 150 (people icon) on one side and 350 (people icon) on the other side, similar to this example:
https://i.sstatic.net/U8MTF.png
Currently, the price change is triggered by a button. How can I convert this into a toggle switch with the green half representing the active part?
Thank you for your help!