Slider checkboxes
How do I make an slider checkboxes?
What is a slider checkboxes? How do you make a slider checkboxes? This script and codes were developed by Iulia Sargu on 14 January 2023, Saturday.
Slider checkboxes Previews
Slider checkboxes - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Slider checkboxes</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section title="Slide 1"> <div class="slideOne"> <input type="checkbox" value="None" id="slideOne" name="check" /> <label for="slideOne"></label> </div>
</section>
<section title="Slide 2"> <div class="slideTwo"> <input type="checkbox" value="None" id="slideTwo" name="check" /> <label for="slideTwo"></label> </div>
</section>
<section title="Slide 3"> <div class="slideThree"> <input type="checkbox" value="None" id="slideThree" name="check" /> <label for="slideThree"></label> </div>
</section>
<section title="Slide 4"> <div class="slider"> <input type="checkbox" value="None" id="checkbox-toggle-pill" name="checkbox-toggle-pill" class="toggle-pill"/> <label class="toggle-label" for="checkbox-toggle-pill">
<!-- Switch comment -->
<!-- <span class="on ">ON</span> <span class="off ">OFF</span> --> </label> </div>
</section>
<section title="Slide 5"> <div class="slider-checkbox"> <input id="my-check-box" type="checkbox" /> <label for="my-check-box"> <span id="ball"></span> </label> </div>
</section>
<section title="Slide 6"> <div class="checkbox-slider"> <input type="checkbox" id="slider_checkbox" name="slider_checkbox"> <label for="slider_checkbox"></label> </div>
</section>
<section title="Slide 7"> <label class="toggle"> <input type="checkbox"> <span data-unchecked="Off" data-checked="On"></span> </label>
</section>
</body>
</html>
Slider checkboxes - Script Codes CSS Codes
body { background: #EEEEEE;
}
/* Slide 1 */
.slideOne { width: 50px; height: 10px; background: #333; margin: 20px auto; position: relative; border-radius: 50px; box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
}
.slideOne label { display: block; width: 16px; height: 16px; position: absolute; top: -3px; left: -3px; cursor: pointer; background: #ed495c; background: -webkit-linear-gradient( top, #fcfff4 0%, #dfe5d7 40%, #ed495c 100% ); background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #ed495c 100%); border-radius: 50px; box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3); -webkit-transition: all 0.4s ease; transition: all 0.4s ease;
}
.slideOne input[type=checkbox] { visibility: hidden;
}
.slideOne input[type=checkbox]:checked + label { left: 37px; background: #93ED49; background: -webkit-linear-gradient( top, #fcfff4 0%, #dfe5d7 40%, #93ED49 100% ); background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #93ED49 100%);
}
/* Slide 2 */
.slideTwo { width: 80px; height: 30px; background: #333; margin: 20px auto; position: relative; border-radius: 50px; box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
}
.slideTwo:after { content: ''; position: absolute; top: 14px; left: 14px; height: 2px; width: 52px; background: #111; border-radius: 50px; box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
}
.slideTwo label { display: block; width: 22px; height: 22px; cursor: pointer; position: absolute; top: 4px; z-index: 1; left: 4px; background: #fcfff4; border-radius: 50px; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3); background: -webkit-linear-gradient( top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100% ); background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
}
.slideTwo label:after { content: ''; width: 10px; height: 10px; position: absolute; top: 6px; left: 6px; background: #ed495c; border-radius: 50px; box-shadow: inset 0px 1px 1px black, 0px 1px 0px rgba(255, 255, 255, 0.9);
}
.slideTwo input[type=checkbox] { visibility: hidden;
}
.slideTwo input[type=checkbox]:checked + label { left: 54px;
}
.slideTwo input[type=checkbox]:checked + label:after { background: #93ed49;
}
/* Slide 3 */
.slideThree { width: 80px; height: 26px; background: #333; margin: 20px auto; position: relative; border-radius: 50px; box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
}
.slideThree:after { content: 'OFF'; color: #ed495c; position: absolute; right: 10px; z-index: 0; font: 12px/26px Arial, sans-serif; font-weight: bold; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.15);
}
.slideThree:before { content: 'ON'; color: #93ED49; position: absolute; left: 10px; z-index: 0; font: 12px/26px Arial, sans-serif; font-weight: bold;
}
.slideThree label { display: block; width: 34px; height: 20px; cursor: pointer; position: absolute; top: 3px; left: 3px; z-index: 1; background: #fcfff4; background: -webkit-linear-gradient( top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100% ); background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); border-radius: 50px; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
}
.slideThree input[type=checkbox] { visibility: hidden;
}
.slideThree input[type=checkbox]:checked + label { left: 43px;
}
/* Slide 4 */
.slider { position: relative; width: 200px; padding: 20px; margin: 20px auto; display: block;
}
input[type="checkbox"].toggle-pill { position: absolute; left: -9999px; visibility: hidden;
}
label.toggle-label { color: #B3B2B3;
}
/* label.toggle-label span.on { position: absolute; top: 22px; right: 65px; display: none; color: #fff;
}
label.toggle-label span.off { position: absolute; top: 22px; right: 38px; display: inline-block; color: #fff;
} */
label.toggle-label:before { content: ''; background: #ed495c; width: 68px; height: 36px; position: absolute; top: 14px; right: 30px; border-radius: 10px;
}
label.toggle-label:after { content: ''; position: absolute; right: 70px; top: 22px; width: 20px; height: 20px; background: #fff; transition: .1s ease-in; border-radius: 5px;
}
input.toggle-pill { visibility: hidden;
}
input.toggle-pill:checked + label.toggle-label:after { opacity: 1; transform: translateX(32px); background: #fff;
}
input.toggle-pill:checked + label.toggle-label:before { background: #93ed49;
}
/* input.toggle-pill:checked + label.toggle-label span.on { display: inline-block;
}
input.toggle-pill:checked + label.toggle-label span.off { display: none;
} */
/* Slide 5 */
.slider-checkbox { width: 3em; height: 1.5em; margin: 20px auto;
}
.slider-checkbox * { transition: 250ms; box-sizing: border-box;
}
.slider-checkbox input[type="checkbox"] { display: none;
}
.slider-checkbox label { display: inline-block; width: 100%; height: 95%; background: #ed495c; border-radius: 0.7em; padding-top: 0.2em; padding-left: 0.2em;
}
.slider-checkbox span { display: inline-block; width: 1em; height: 1em; background: #FFF; border: none; border-radius: 2em;
}
.slider-checkbox input[type="checkbox"]:checked ~ label { background: #93ed49; padding-left: 1.7em;
}
/* Slide 6 */
.checkbox-slider [type="checkbox"] { display: none;
}
.checkbox-slider label { display: block; width: 40px; height: 20px; position: relative; background: #ed495c; border-radius: 10px; transition: background 0.2s ease; cursor: pointer; margin: 20px auto;
}
.checkbox-slider label::before { content: ''; display: block; width: 50%; height: 100%; background: #ffffff; border-radius: 50%; box-shadow: 0 0 0 1px #d1d1d1; position: absolute; left: 0; top: 0; transition: transform 0.2s ease-in-out;
}
.checkbox-slider [type="checkbox"]:checked ~ label { background: #93ed49;
}
.checkbox-slider [type="checkbox"]:checked ~ label::before { -webkit-transform: translateX(100%); transform: translateX(100%);
}
/* Slide 7 */
.toggle { margin: 20px auto; display: block; width: 8em; background: #333; padding: 0.125em; cursor: pointer; } .toggle input { position: absolute; visibility: hidden; } .toggle span { position: relative; left: 0%; display: block; text-transform: uppercase; text-align: center; -webkit-transition: left 200ms ease-out; -moz-transition: left 200ms ease-out; -o-transition: left 200ms ease-out; transition: left 200ms ease-out; } .toggle :checked ~ span { left: 50%; } .toggle span:before { content: attr(data-unchecked); display: block; width: 50%; background-color: #ed495c; border-radius: 0.15em; box-shadow: inset 0 0.1em 0 rgba(255, 255, 255, 0.3); color: #fff; } .toggle :checked ~ span:before { content: attr(data-checked); background-color: #93ED49; }
| Developer | Iulia Sargu |
| Username | kanpeki |
| Uploaded | January 14, 2023 |
| Rating | 3 |
| Size | 3,060 Kb |
| Views | 6,072 |
Do you need developer help for Slider checkboxes?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Iulia Sargu (kanpeki) Script Codes
| Name | Size |
| Daily CSS Images 07 Ruler | 2,470 Kb |
| Daily CSS Images 05 Mickey | 5,434 Kb |
| 1-tribute-page | 2,712 Kb |
| Daily CSS Images 02 Elephant | 3,740 Kb |
| Animation mixin test | 2,050 Kb |
| 2-personal-portfolio | 6,620 Kb |
| Daily CSS Images 03 Beaver | 3,561 Kb |
| Daily CSS Images 06 Clock | 3,380 Kb |
| Landscape only | 1,906 Kb |
| Daily CSS Images 04 Tiger | 4,109 Kb |
Create amazing marketing copy with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Starfield old school style | Bolloxim | 5,214 Kb |
| Vue.js Lazy Loading | Kjbrum | 3,620 Kb |
| A Pen by Stan Williams | Stanssongs | 6,706 Kb |
| Flat iOS 7 Safari Icon | Rss | 3,332 Kb |
| Eunice A | Ejbronze | 2,203 Kb |
| Two Element Typeface | Chrisota | 4,942 Kb |
| Toggling Divs with jQuery | Yying6 | 1,967 Kb |
| Octopus Bar iPad App Interactions | Davidkpiano | 6,735 Kb |
| BabyStore | Pablo-Ai | 3,807 Kb |
| Compare resources on mobile sites | Gyusza | 3,226 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!