Slide to unlock

In my app I need to create a slider that make a specific action so when I swipe to the right it will execute some function. I create a custom Slider but I don`t know how to animate the movement of the slider if I release it before I get to the right corner. Here is my code:

        <RangeControl ux:Class="BotonDePanico" Focus.IsFocusable="true" HitTestMode="LocalBounds" Width="300" Height="70">
          <string ux:Property="Text" />

          <LinearRangeBehavior />

              var Observable = require("FuseJS/Observable");
              var sliderValue = Observable(0);

              function SliderReleased() {
                  if(sliderValue.value < 95) {
                      sliderValue.value = 0;
                  }else {
                    //Do something
              module.exports = {
                  SliderReleased: SliderReleased,
                  sliderValue: sliderValue

              <DataBinding Target="this.Value" Key="sliderValue" />

              <Panel ux:Name="thumb" Alignment="Left" Width="70" Height="70" HitTestMode="LocalBounds">
                  <Text Value="Hi!" Alignment="VerticalCenter" TextAlignment="Center" TextColor="White" />
                  <Circle Color="Black" />
              <Text ux:Name="currentValue" Value="dasdasd" Alignment="VerticalCenter" Margin="80,0,0,0" />
              <Panel Layer="Background">
                  <Rectangle CornerRadius="50" Height="70" Color="#E4E4E4" />

              <Callback Handler="{SliderReleased}" />

              <Change currentValue.Opacity="0" />
              <Move Target="thumb" X="230" />


      <BotonDePanico />

Hi Cristian,

i build a quick sample for you…

i would do that with a SwipeGesture and a SwipingAnimation like this:


    exports.handleUnlock = function() {
        //do something here...


<Rectangle ux:Name="slideContainer" Color="#E4E4E4" CornerRadius="50" Height="70" Margin="20">
    <SwipeGesture ux:Name="swipeRight" Direction="Right" LengthNode="slideContainer" Type="Auto" Threshold="0.75" />

    <Circle ux:Name="slideThumb" Color="#000" Width="70" Alignment="Left">
        <Text Color="#fff" Value="Hi!" Alignment="Center" />

    <SwipingAnimation Source="swipeRight">
        <Move Target="slideThumb" X="width(slideContainer)-70" DurationBack="1" />

    <Swiped Source="swipeRight">
        <Callback Handler="{ handleUnlock }" />


you can play around with the Threshold, i have set it to 0.75 which means that you have to swipe 3/4 of the distance to get an active state that fires the Swipe Callback Handler, if set to 0.5 you have to swipe only the half way for example…

hope that helps :slight_smile:

Best Tom

Thanks!!! Work perfect!

glad to help :slight_smile: