How to change the checkbox into slide (toggle switch)

API & Customization Show & Tell
1

I leave here the instructions to change the checkbox (true,false) into slides, very useful for mobile apps.

 

CSS code: (remember to change the color of the slide for the one you want)

.option {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}

/* Hide default HTML checkbox */
.option input {
opacity: 0;
width: 0;
height: 0;
}

/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}

.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}

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

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

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

/* Rounded sliders */
.slider.round {
border-radius: 34px;
}

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

JS code here:  (this applies in all views)

$(document).on('knack-view-render.any', function(event, view, data) {

var slider1 = $( "<span class='slider round'></span>" );

$( ".option" ).append( slider1 );

});

 

 

that's all!

2

Does anyone know if the slider can be added to a table and not just a form?

3

Beautiful, thanks Van!

4

396663223751  

"I have to reload the browser to display the toggles."

Change knack-scene-render.any to this instead:  knack-view-render.form

 

 

 

knack-scene-render.any is saying "run the code 1 time per page".  That's too broad of a rule. That's why after the form reloads, the checkboxes go back to normal again, because the code to make them sliders hasn't run. 

 

Cheers

5

Than you for the responses.  Tony, I liked your solution and it solved my initial issue.  However, I am still left with a similar issue.  After submitting the form and then using the "Reload form" link that Knack generates, the toggle shows as a checkbox.  I have to reload the browser to display the toggles.  Any solution to this?

6

Hi, here is a slightly different approach.

css

/* Toggle Slide */
input.toggle-slide {
  position: relative;
  -webkit-appearance: none;
  outline: none;
  width: 50px;
  height: 30px;
  background-color: #fff;
  border: 1px solid #D9DADC;
  border-radius: 50px;
  box-shadow: inset -20px 0 0 0 #fff;
  -webkit-transition: .4s;
  transition: .4s;
}

input.toggle-slide:after {

content: “”;

position: absolute;

top: 1px;

left: 1px;

background: transparent;

width: 26px;

height: 26px;

border-radius: 50%;

box-shadow: 2px 4px 6px rgba(0,0,0,0.2);

}


input.toggle-slide:checked {

box-shadow: inset 20px 0 0 0 #4ed164;

border-color: #4ed164;

}


input.toggle-slide:checked:after {

left: 20px;

box-shadow: -2px 4px 3px rgba(0,0,0,0.05);

}

 

JS

// Slider
$(document).on('knack-scene-render.any', function (event, view, data) {

// Toggle Slide

var toggleSlide = document.getElementsByTagName('input');

for (var i = 0; i &lt; toggleSlide.length; i++) {
  
  	 if(toggleSlide[i].type == "checkbox") {

		toggleSlide[i].classList.add("toggle-slide");
     };
};



});

 

7

396663223751

Substitute this line in your JavaScript:

$(document).on('knack-view-render.form', function(event, view, data) {

 

That will fix your issue. Assuming you are only using the toggles on Forms. 

8

396663223751

That issue is happening because multiple "slider round" classes are being created, one for each view on your page. See picture below. These classes are called "slider" not "slider round" but it's the same issue. 

 

 

That's why it works when you refresh the form, because your form is one "view" and the code is designed to execute on any view. However, this is also why it doesn't work when there are multiple views on a page, because the code will execute once for each view and you end up with multiple "slider" classes.  For example, a page with 2 views will run the same code 2 times.

To change this behavior, you want to modify the $(document).on('knack-view-render.any'... to only the specific view_### containing the form. 

OR

Write a small snippet of code to check if the class already exists before appending it. For example, if class="slider option" exists already, then you wouldn't append it.

9

I am getting an issue when I load a form with the toggles.  Initially, they are not able to be edited and I have to reload the form to be able to actually toggle the switch. 

The same issues seems to be occurring when I return to a form where the toggles have been previously entered and the form submitted.  The toggles initially only show the default values and are not editable, then I have to reload the form to get the previously saved toggle positions to display.  Anyone else having this issue and any recommended solutions?

10

Change XXX with your view key:

$(document).on('knack-view-render.view_XXX', function(event, view, data) {

var slider1 = $( "<span class='slider round'></span>" );

$( ".option" ).append( slider1 );


});

11

Also, looking to specifically target only a few scenes, Please help?
I'm still learning here an not getting the code correctly yet. Thanks in advance.

12

Hello!   Thank you for this!

As a single option: "Yes/No" for a field shows below the field name as expected.

When applied to a multiple-choice field, the new toggle is covering the multiple-choice option wording. 

Are you able to assist with the code required to shift the words to the right an appropriate distance?

13

Sure.

14

Nice. Be great to see a screen grab of the look :)

15

Very interesting, looking forward to giving this a try!