What is the technique for moving a slider-like checkbox slider to one of its labels when they are clicked on?

Question

What is the technique for moving a slider-like checkbox slider to one of its labels when they are clicked on?

Is there a way to make the switch slider move to the word the user clicked on (medium or large)? I'm not sure if I can track the movement of the switch slider with JavaScript or if it's possible to do with CSS. Right now, I have only created a simple toggle switcher with changing color. The issue is that the slider has been heavily customized with :before, :checked, input, and so on, so I don't even know where to start to make it happen.

.slider.round {
    border-radius: 34px;
  }
  
.slider.round:before {
    border-radius: 50%;
}

.row-inputs-radio {
    display: flex;
    justify-content: space-between;
}

.item-size {
    margin-left: 10px;
}

.item-size-eg {
    font-size: 15px;
    color: rgb(155, 154, 154);
}

.continue-btn button {
    outline: none;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 10px;
    margin-top: 15px;
  }
  
  .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: -74px;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    width: 187px;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: -3px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border: 1px solid grey;
  }
  
  input:checked + .slider {
    background-color: #13985C;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
input:checked + .slider:before {
    -webkit-transform: translateX(120px);
    -ms-transform: translateX(120px);
    transform: translateX(162px);
}

<div class="column-input">
          <div class="row-inputs row-inputs-radio">
            <div class="row-input">
              <div class="item-size"><bold>Medium</bold></div>           
            </div>
            <div class="row-input">
              <label class="switch">
                <input type="checkbox" checked />
                <span class="slider round"></span>
              </label>
            </div>
            <div class="row-input">
              <div class="item-size"><bold>Large</bold></div>
            </div>
          </div>

javascript html css

Answer 1

Answer №1

Here is a breakdown of the steps:

Identify the elements with classes medium, large, and input
Attach event listeners for the onclick event to these elements for toggling
Update the CSS to include cursor: pointer to indicate these elements are clickable

var medium = document.querySelector('.medium'),
    large = document.querySelector('.large'),
    slider = document.querySelector('.switch input');;

medium.onclick = function() {
  slider.checked = false;
}
large.onclick = function() {
  slider.checked = true;
}

.medium, .large {
  cursor: pointer;
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.row-inputs-radio {
  display: flex;
  justify-content: space-between;
}

.item-size {
  margin-left: 10px;
}

.item-size-eg {
  font-size: 15px;
  color: rgb(155, 154, 154);
}

.continue-btn button {
  outline: none;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 10px;
  margin-top: 15px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: -74px;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  width: 187px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: -3px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border: 1px solid grey;
}

input:checked+.slider {
  background-color: #13985C;
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
  -webkit-transform: translateX(120px);
  -ms-transform: translateX(120px);
  transform: translateX(162px);
}

<div class="column-input">
  <div class="row-inputs row-inputs-radio">
    <div class="row-input">
      <div class="item-size medium">
        <bold>Medium</bold>
      </div>
    </div>
    <div class="row-input">
      <label class="switch">
                <input type="checkbox" checked />
                <span class="slider round"></span>
              </label>
    </div>
    <div class="row-input">
      <div class="item-size large">
        <bold>Large</bold>
      </div>
    </div>
  </div>

Answer 2

Here is a breakdown of the steps:

Identify the elements with classes medium, large, and input
Attach event listeners for the onclick event to these elements for toggling
Update the CSS to include cursor: pointer to indicate these elements are clickable

var medium = document.querySelector('.medium'),
    large = document.querySelector('.large'),
    slider = document.querySelector('.switch input');;

medium.onclick = function() {
  slider.checked = false;
}
large.onclick = function() {
  slider.checked = true;
}

.medium, .large {
  cursor: pointer;
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.row-inputs-radio {
  display: flex;
  justify-content: space-between;
}

.item-size {
  margin-left: 10px;
}

.item-size-eg {
  font-size: 15px;
  color: rgb(155, 154, 154);
}

.continue-btn button {
  outline: none;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 10px;
  margin-top: 15px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: -74px;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  width: 187px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: -3px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border: 1px solid grey;
}

input:checked+.slider {
  background-color: #13985C;
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
  -webkit-transform: translateX(120px);
  -ms-transform: translateX(120px);
  transform: translateX(162px);
}

<div class="column-input">
  <div class="row-inputs row-inputs-radio">
    <div class="row-input">
      <div class="item-size medium">
        <bold>Medium</bold>
      </div>
    </div>
    <div class="row-input">
      <label class="switch">
                <input type="checkbox" checked />
                <span class="slider round"></span>
              </label>
    </div>
    <div class="row-input">
      <div class="item-size large">
        <bold>Large</bold>
      </div>
    </div>
  </div>

Answer 3

Answer №2

Implementing Event Listeners with addEventListener()

To achieve the desired behavior, we can add event listeners to the labels to toggle the checkbox on click. Using event delegation, we only need to add a single event listener to the parent element.

We can implement a boolean value to determine if the clicked label is the "on" label that should check the checkbox. This boolean can directly set the value of the .checked attribute. Here's a simple pseudo-code representation:

Check if the label is the "on" label, then check the checkbox
If the label is not the "on" label, do not check the checkbox

We can identify the "on" label by checking if the .row-input div it belongs to is the last one in the list.

Accessibility Note: Simply adding a click listener to a non-clickable element does not make it accessible. To make an element accessible for click actions, one must:

Add appropriate listeners (click, key, etc.)
Ensure ARIA conformity for semantic meaning

While creating custom elements is possible, it involves substantial work. It is advisable to stick to the existing HTML specifications unless there's a specific need for custom elements.

Below is a snippet demonstrating the implementation:
Note: The code supports multiple .column-input elements.

Here is an example of the HTML and CSS code:

Answer 4

Implementing Event Listeners with addEventListener()

To achieve the desired behavior, we can add event listeners to the labels to toggle the checkbox on click. Using event delegation, we only need to add a single event listener to the parent element.

We can implement a boolean value to determine if the clicked label is the "on" label that should check the checkbox. This boolean can directly set the value of the .checked attribute. Here's a simple pseudo-code representation:

Check if the label is the "on" label, then check the checkbox
If the label is not the "on" label, do not check the checkbox

We can identify the "on" label by checking if the .row-input div it belongs to is the last one in the list.

Accessibility Note: Simply adding a click listener to a non-clickable element does not make it accessible. To make an element accessible for click actions, one must:

Add appropriate listeners (click, key, etc.)
Ensure ARIA conformity for semantic meaning

While creating custom elements is possible, it involves substantial work. It is advisable to stick to the existing HTML specifications unless there's a specific need for custom elements.

Below is a snippet demonstrating the implementation:
Note: The code supports multiple .column-input elements.

Here is an example of the HTML and CSS code:

Answer 5

Answer №3

My demonstration does not involve assigning a unique class to each individual component. Instead, I utilized the forEach() method.

let select = document.querySelectorAll('.row-input .item-size');
let checked_pos = document.querySelector('.row-input .switch input[type="checkbox"]');

Array.from(select).forEach(function(selectCurrent, index) {
  selectCurrent.onclick = function() {
    if (index == 0) {
      checked_pos.checked = false;
    }
    if (index == 1) {
      checked_pos.checked = true;
    }
  }
});

.slider.round {
    border-radius: 34px;
  }
  
.slider.round:before {
    border-radius: 50%;
}

.row-inputs-radio {
    display: flex;
    justify-content: space-between;
}

.item-size {
    margin-left: 10px;
}

.item-size-eg {
    font-size: 15px;
    color: rgb(155, 154, 154);
}

.continue-btn button {
    outline: none;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 10px;
    margin-top: 15px;
  }
  
  .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: -74px;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    width: 187px;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: -3px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border: 1px solid grey;
  }
  
  input:checked + .slider {
    background-color: #13985C;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
input:checked + .slider:before {
    -webkit-transform: translateX(120px);
    -ms-transform: translateX(120px);
    transform: translateX(162px);
}

<div class="column-input">
          <div class="row-inputs row-inputs-radio">
          
            <div class="row-input">
              <div class="item-size"><bold>Medium</bold></div>       
            </div>
            
            <div class="row-input">
              <label class="switch">
                <input type="checkbox" checked/>
                <span class="slider round"></span>
              </label>
            </div>
            
            <div class="row-input">
              <div class="item-size"><bold>Large</bold></div>
            </div>
            
          </div>

Answer 6

My demonstration does not involve assigning a unique class to each individual component. Instead, I utilized the forEach() method.

let select = document.querySelectorAll('.row-input .item-size');
let checked_pos = document.querySelector('.row-input .switch input[type="checkbox"]');

Array.from(select).forEach(function(selectCurrent, index) {
  selectCurrent.onclick = function() {
    if (index == 0) {
      checked_pos.checked = false;
    }
    if (index == 1) {
      checked_pos.checked = true;
    }
  }
});

.slider.round {
    border-radius: 34px;
  }
  
.slider.round:before {
    border-radius: 50%;
}

.row-inputs-radio {
    display: flex;
    justify-content: space-between;
}

.item-size {
    margin-left: 10px;
}

.item-size-eg {
    font-size: 15px;
    color: rgb(155, 154, 154);
}

.continue-btn button {
    outline: none;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 10px;
    margin-top: 15px;
  }
  
  .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: -74px;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    width: 187px;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: -3px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border: 1px solid grey;
  }
  
  input:checked + .slider {
    background-color: #13985C;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
input:checked + .slider:before {
    -webkit-transform: translateX(120px);
    -ms-transform: translateX(120px);
    transform: translateX(162px);
}

<div class="column-input">
          <div class="row-inputs row-inputs-radio">
          
            <div class="row-input">
              <div class="item-size"><bold>Medium</bold></div>       
            </div>
            
            <div class="row-input">
              <label class="switch">
                <input type="checkbox" checked/>
                <span class="slider round"></span>
              </label>
            </div>
            
            <div class="row-input">
              <div class="item-size"><bold>Large</bold></div>
            </div>
            
          </div>

What is the technique for moving a slider-like checkbox slider to one of its labels when they are clicked on?

Answer №1

Answer №2

Implementing Event Listeners with addEventListener()

Answer №3

Similar questions

Updating the Background Color of a Selected Checkbox in HTML

encountering an issue: file or directory does not exist, unable to open 'rds-combined-ca-bundle.pem'

The CORS Policy error message "The 'Access-Control-Allow-Origin' header is missing on the requested resource" in Next.js

What is the process to subscribe and obtain data from a server-to-user channel using pusher-js?

The <map> <area> element functions properly only in webkit browsers

Clicking on a checkbox and subsequently removing validation through jquery

Utilize AJAX response to mark checkbox as checked

Creating a personalized Angular filter to format various object properties in version 1.5

challenge encountered while trying to remove ScrollTop feature on mobile gadgets

Issue with Material UI Tab component not appearing in the first position

What is the process for saving selected values from a drop-down list into a database?

Testing NodeJS Database Functionality using Mocha and Asserting with should.js

Troubleshooting Issues with Integrating Bootstrap Carousel

What is the best way to assign a series of radio buttons to an array within an Angular controller's model?

When a user clicks on an element, use jQuery to show a specific

Prevent event propagation in jQuery by using .stopPropagation() when hovering over a

Having trouble with Vue component not updating Vuex state before it loads?

Modify the values in a textbox using JavaScript to suit your needs

Utilize the functionality of the acuityscheduling API to streamline your

Google Web Toolkit - Update PopupPanel layout upon rotation