jcb-switch
v1.0.3
Published
slider switch
Downloads
3
Readme
Install
npm install jcb-switchUsage example
index.html
<!DOCTYPE html>
<body>
<jcb-switch id="switch"></jcb-switch>
</body>
<script>
document.getElementById('switch').addEventListener('change', (event) => {
console.log('change', event.target, event.detail.value)
})
</script>
<style>
:root {
--jcb-switch-color: blue;
}
</style>npm i jcb-switch
npm i parcel -g
parcel index.htmlAPI references
jcb-switch
Properties
| Name | Type | Default | Description |
| ---------------- |:-------------:|:--------:| ---------------------------------------------------|
| value | Number | 0 | State of switch: 1=on, 0=off |
Events
| Name | Description | Value |
| ------------------------- |---------------------------------------| -------------------------------|
| change | Emitted when switch is toggled | event.detail.value = state |
CSS variables
| Name | Description |
| ------------------------------------------ |---------------------------------------|
| --jcb-switch-color | color of switch |
| --jcb-switch-background-color | color of switch background |