Image comparison slider

Hey guys! I have a very broad UI implementation question. I would like to build a image comparison slider like this one (link: and just can not get my around on how to approach this feature in fuse. Would really appreciate if someone could help me out with a very simple MVP or further suggestions. Thanks! :v:

Hello! I’d just overlay the two images and crop them by the slider’s X position. Or maybe use a mask:


thanks! I will try it out.

Hi all

Couldn’t resist trying out this nice effect in fuse. There are probably other ways to do it but a simple solution is:

	<LetFloat ux:Name="MySliderValue" Value="150"/>

    <MySlider />

	<Panel Alignment="Center" >
		<Rectangle Width="{MySliderValue}" ClipToBounds="true" Alignment="Left" >
			<Image Url="" Width="300" Alignment="Left">
				<Halftone />
		<Image Url="" Width="300" Alignment="Left" />

    <RangeControl ux:Class="MySlider" Width="300" Value="{MySliderValue}" Minimum="0" Maximum="300" >
        <LinearRangeBehavior />
        <Panel >
            <Circle ux:Name="MySliderButton" Anchor="50%,50%" Alignment="Left" Color="#dc717d" Width="35" Height="35" >
            	<Rectangle Color="#dc717d" Height="20" Width="6" />
            	<Rectangle Color="White" Height="12" Width="12" >
            		<Rotation Degrees="45" />
            <Move Target="MySliderButton" X="1" RelativeTo="ParentSize" />

Best regards