Custom switch as a Components

How-to Discussions
1

Hi,
I am creating Settings page for my app. The settings on the page can be On or Off. I am using the Custom Switch example found here
https://fuse-open.github.io/examples/custom-switch/index.html
to set the setting.
I need to set the On/Off state on load for each Setting based on a database value and I am just looking for some advice on how best to achieve this. I also need to save the value back to the database if the switched is toggled.
Is there a recommended way to do this? I have tried to add a property to the ColourSwitch component like so

<bool ux:Property="IsOn" />
<SwipeGesture ux:Name="swipe" Direction="Right" Length="38" Type="Active" IsActive="{Property Value} || {Property IsOn}"/>

and then setting it on the page like so

<ColourSwitch Alignment="VerticalCenter" IsOn="{swipeValue}">
	<WhileTrue Value="{swipeValue}">
		<Change blueCircleScaling.Factor="10" Duration="0.25" Easing="QuadraticOut" Delay="0.20" />
		<Change blueCircle.Color="#11abfe" Duration="0.25" Easing="QuadraticOut" Delay="0.20" />
		<Change blueCircleTranslation.X="19" Duration="0" DurationBack="0" Delay="0.25" Easing="QuadraticInOut"/>
		<Clicked>
			<Callback Handler="{setStatusRatingID}" />
			<DebugAction Message="ColourSwitch clicked" />
		</Clicked>
	</WhileTrue>
</ColourSwitch>

I am not sure how best to toggle the swipeValue in the .js file though?

Any help would be greatly appreciated.

Thank you.