Toggle - Slider w/ inline labels

Developer
Josh Vogt
Size
3,024 Kb
Views
16,192
  1. Toggle - Slider w/ inline labels Previews
  2. Toggle - Slider w/ inline labels HTML Codes
  3. Toggle - Slider w/ inline labels CSS Codes
  4. Toggle - Slider w/ inline labels JS Codes

How do I make an toggle - slider w/ inline labels?

What is a toggle - slider w/ inline labels? How do you make a toggle - slider w/ inline labels? This script and codes were developed by Josh Vogt on 18 November 2022, Friday.

Toggle - Slider w/ inline labels Previews
IQ Test

Toggle - Slider w/ inline labels - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Toggle - Slider w/ inline labels</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="Sorting" class="sr-sort-control" style="display: block;"> <div class="sr-switch"> <input id="SortTypePostDate" type="radio" name="SortType"> <label for="SortTypePostDate">MVP</label> <input checked="checked" id="SortTypeRelevance" type="radio" name="SortType"> <label for="SortTypeRelevance">End State</label> <span class="toggle"></span> </div> <!-- end switch -->
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Toggle - Slider w/ inline labels - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700);
* { box-sizing: border-box; font-family: "Source Sans Pro";
}
#Sorting { margin-bottom: 20px;
}
.sr-switch { background: #fff; border: 1px solid #ccc; border-radius: 32px; display: block; height: 30px; position: relative; width: 120px; font-family: "Source Sans Pro";
}
.sr-switch label { color: #525252; font-size: 14px; -webkit-transition: all .2s ease; transition: all .2s ease; top: 5px; font-weight: 600; cursor: pointer;
}
.sr-switch label:nth-of-type(1) { left: 10px; position: absolute; text-align: right; color: #525252; opacity: 0;
}
.sr-switch label:nth-of-type(2) { position: absolute; right: 10px; text-align: left; opacity: 1;
}
.sr-switch input { height: 30px; left: 0; opacity: 0; position: absolute; top: 0; width: 120px; z-index: 2;
}
.sr-switch.highlight-item label:nth-of-type(1) { opacity: 1;
}
.sr-switch.highlight-item label:nth-of-type(2) { opacity: 0;
}
.sr-switch input:checked ~ .toggle { left: 90px;
}
.sr-switch input ~ :checked ~ .toggle { left: 4px;
}
.sr-switch input:checked { z-index: 0;
}
.toggle { background: #69be28; border-radius: 100%; height: 23px; left: 0; position: absolute; top: 2px; -webkit-transition: left .2s ease; transition: left .2s ease; width: 23px; z-index: 1;
}

Toggle - Slider w/ inline labels - Script Codes JS Codes

$('input[type="radio"]').on('click', function(e) { $('.sr-switch').toggleClass('highlight-item'); });
Toggle - Slider w/ inline labels - Script Codes
Toggle - Slider w/ inline labels - Script Codes
Home Page Home
Developer Josh Vogt
Username josh_vogt
Uploaded November 18, 2022
Rating 3
Size 3,024 Kb
Views 16,192
Do you need developer help for Toggle - Slider w/ inline labels?

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!

Josh Vogt (josh_vogt) Script Codes
Name
Items sliding out of list
Toggle - Slider
Header - search v3
CSS modals and sheets animations
Animating Flexbox Properties
Workopolis SVG Logo - Animated
SMPTE Test Pattern - Flexbox
Dismissing and Adding items with CSS transforms
Header - search v2
Password Reset
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!