Image comparison slider

How-to Discussions
1

Hey guys! I have a very broad UI implementation question. I would like to build a image comparison slider like this one (link: https://codyhouse.co/demo/image-comparison-slider/index.html) 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:

2

Hello! I’d just overlay the two images and crop them by the slider’s X position. Or maybe use a mask:
https://fuseopen.com/docs/fuse/effects/mask.html

2 Likes
3

thanks! I will try it out.

4

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:

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

    <MySlider />

	<Panel Alignment="Center" >
		<Rectangle Width="{MySliderValue}" ClipToBounds="true" Alignment="Left" >
			<Image Url="https://codyhouse.co/demo/image-comparison-slider/img/img-original.jpg" Width="300" Alignment="Left">
				<Halftone />
			</Image>
		</Rectangle>
		<Image Url="https://codyhouse.co/demo/image-comparison-slider/img/img-original.jpg" Width="300" Alignment="Left" />
	</Panel>

    <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" />
            	</Rectangle>
            </Circle>
        </Panel>
        <ProgressAnimation>
            <Move Target="MySliderButton" X="1" RelativeTo="ParentSize" />
        </ProgressAnimation>
    </RangeControl>
</App>

Best regards

Morten