Custom Segmented Control In jQuery - Toggle.js

A great and user-friendly alternative to the native select boxes and radio buttons.

Toggle.js is a tiny jQuery plugin for creating a segmented control where you can make a single selection from a group of toggle buttons. 

How to use it:

1. Insert the toggle.js plugin after jQuery library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/toggle.js"></script>

2. Create a container to hold the segmented control.

<div id="example" class="selectGroup">
  
</div>

3. Define an array of options containing values and labels as follows:

let opt = [
    { value: 1, label: "jQuery" },
    { value: 2, label: "Script" },
    { value: 3, label: "Net" },
];

4. Call the function on the container element and done:

$("#example").setupToggles({
  toggleOptions: opt,
});

5. Set the initial value on page load. Default: 0.

$("#example").setupToggles({
  toggleOptions: opt,
  defaultValue: 1,
});

6. Trigger a function after an option has been selected.

$("#example").setupToggles({
  toggleOptions: opt,
  onSelectedValueChange: toggleValueChanged(selectedValue) {
    alert(selectedValue);
  }.
});

7. Apply CSS styles to the segmented control.

.selectItem {
  border: 0px solid black;
  width: auto;
  height: 2em;
  line-height: 2.5em;
  text-align: center;
  background-color: #9eb3be;
  display: inline;
  padding: 0em 2em 0.5em;
  float: left;
  color: #3c3c3e;
  cursor: pointer;
}

.selectItem.selected {
  background-color: #6eb4ef;
  color: white;
}

.or {
  position: relative;
  float: left;
  width: 0.3em;
  height: 2.5em;
  z-index: 3;
  color: #555;
}

.or::before {
  position: absolute;
  text-align: center;
  border-radius: 500rem;
  content: 'or';
  top: 50%;
  left: 50%;
  background-color: #fff;
  text-shadow: none;
  margin-top: -0.9em;
  margin-left: -0.9em;
  width: 1.7em;
  height: 1.7em;
  line-height: 1.7em;
  font-style: normal;
  font-weight: 700;
  box-shadow: 0 0 0 1px transparent inset;
}

---

This awesome jQuery plugin is developed by Tonoyankar. For more Advanced Usages, please check the demo page or visit the official website.