Overview

Reusable JavaScript toggle switch component with custom labels, gradient thumb styling, state events and CSS variable customization.

Features

• Custom ON / OFF labels
• Reusable ToggleSwitch class
• onChange callback support
• Size and color control using CSS variables
• Animated metal-style switch UI

Quick Start

1. Open the template folder.
2. Run ToggleSwitch.html in browser.
3. Import the component in your project.
4. Initialize with a container selector.

Usage Example

import {ToggleSwitch} from "./ToggleSwitch.js";

const sw = new ToggleSwitch(".switchContainer");

sw.onChange((state)=>{
 console.log(state);
});

Custom Labels

sw.label = {
 on:"AUTO",
 off:"MANUAL"
};

CSS Variables

:root{
 --switchWidth:120px;
 --switchHeight:50px;
 --bgColor:#444;
}

API

• new ToggleSwitch(selector) Creates a new switch instance
• onChange(callback) Runs callback when state changes
• label Updates visible switch labels

Download