How to Make a 3 Button Sliding Toggle Switch [Closed]

Question

Hey Guys i wanna know how to make a toggle slide switch button in javascript i have a project of calculator app and i have three themes in it 1 is default theme that i have already set in the css and 2 and 3 i set with javascript three buttons are together and working fine i just wanna make them 3 in 1 slide toggle switch but without any text inside of it and they will move a lil bit forward if i click on to 2 theme or 3 theme or backward like 2 theme or 1 theme and i want them to look like this here's the image themes:

Here is the HTML code:

<!doctype html>
<html>
<body>
<div>
<button onclick="theme1()">1</button>
<button onclick="theme2()">2</button>
<button onclick="theme3()">3</button>
</div>
</body>
</html>

You guys just please help me make this button beautiful like in the images and working sliding button and switching one theme to another

Have a nice day everyone and Happy Coding!

Accepted Answer

Is that works for you?

.switch-toggle {
   float: left;
   background: black;
   border-radius: 2px;
   width: 90px;
}
.switch-toggle input {
  position: absolute;
  opacity: 0;
  width: 30%;
}
.switch-toggle input + label {
  padding: 10px;
  float:left;
  color: black;
  cursor: pointer;
}
.switch-toggle input:checked + label {
  background: red;
  border-radius: 50%;
}

.numberDiv {
  width: 90px;
  display: flex;
  padding-left: 10px;
  }
 
 .numberDiv p {
   width: 30%;
   }

<div class='numberDiv'>
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>
<div class="switch-toggle switch-3 switch-candy">

  <input id="on" name="state-d" type="radio" checked="" />
  <label for="on" onclick="">1</label>

  <input id="off" name="state-d" type="radio"  />
  <label for="off"onclick="">2</label>

  <input  id="na" name="state-d" type="radio" checked="checked"  />
  <label for="na" class="disabled" onclick="">3</label>

</div>

Answer 2

 let toggleSwitch = document.getElementsByClassName('redButton')[0]

        function go_to_1() {
            toggleSwitch.classList.add('horizTranslate1');
            toggleSwitch.classList.remove('horizTranslate2');
            toggleSwitch.classList.remove('horizTranslate3');
            document.getElementById("outerContainer").style.backgroundColor = "#4A5B7E"
            document.getElementById("buttonContainer").style.backgroundColor = "#222D41"
            document.getElementById("legendTextContainer").style.color = "#ffffff"
            doStuff(1)
        }

        function go_to_2() {
            toggleSwitch.classList.add('horizTranslate2');
            toggleSwitch.classList.remove('horizTranslate3');
            toggleSwitch.classList.remove('horizTranslate1');
            document.getElementById("outerContainer").style.backgroundColor = "#E5E5E5"
            document.getElementById("buttonContainer").style.backgroundColor = "#D3CCCA"
            document.getElementById("legendTextContainer").style.color = "#222222"
            doStuff(2)
        }

        function go_to_3() {
            toggleSwitch.classList.add('horizTranslate3');
            toggleSwitch.classList.remove('horizTranslate2');
            toggleSwitch.classList.remove('horizTranslate1');
            document.getElementById("outerContainer").style.backgroundColor = "#000000"
            document.getElementById("buttonContainer").style.backgroundColor = "#444444"
            document.getElementById("legendTextContainer").style.color = "#E2D241"
            doStuff(3)
        }

        function doStuff(n) {
            document.getElementById("message").innerHTML = "Switch is in position " + n
            //your code here...
        }

.redButton.horizTranslate2 { -webkit-transition: -webkit-transform 0.1s linear; -webkit-transform: translateX(20px);}
.redButton.horizTranslate3 { -webkit-transition: -webkit-transform 0.1s linear; -webkit-transform: translateX(40px);}
.redButton.horizTranslate1 { -webkit-transition: -webkit-transform 0.1s linear; -webkit-transform: translateX(0px);}
#outerContainer{position:relative; width:111px; height:98px; background-color:#4A5B7E;}
#buttonContainer{background-color: #222D41; width:71px; height:28px; position:relative; left:20px; top:45px; border-radius:14px;}
.redButton{width:16px; height:16px; background-color:#DB3D2B; border-radius:8px; position:relative; top:6px; left:6px;}
#legendTextContainer{left:22px; display:inline-block;position:absolute; top:23px; color:#ffffff;font-family:Arial; font-size:10pt;text-align:center;}
.legendText{display:inline-block;width:20px; padding-bottom:33px; cursor:default; user-select: none;}
#message{border:1px solid #cccccc; display:inline-block; padding:4px; margin-top: 6px; font-family:Arial; font-size:10pt;}

    <div id="outerContainer">
        <div id="buttonContainer">
            <div class="redButton"></div>
        </div>

       <div id="legendTextContainer">
            <div class="legendText" onclick="go_to_1()">1</div><div
                 class="legendText" onclick="go_to_2()">2</div><div
                 class="legendText" onclick="go_to_3()">3</div>
        </div>
    </div>
    <div id="message">Switch is in position 1</div>

How to Make a 3 Button Sliding Toggle Switch [Closed]

Must Read

2 Answers

Maya Lin-Takahashi