Slide to unlock

How-to Discussions
1

Hi,
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:

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

          <LinearRangeBehavior />

          <JavaScript>
              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
              };
          </JavaScript>

          <Panel>
              <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" />
              </Panel>
              <Text ux:Name="currentValue" Value="dasdasd" Alignment="VerticalCenter" Margin="80,0,0,0" />
              <Panel Layer="Background">
                  <Rectangle CornerRadius="50" Height="70" Color="#E4E4E4" />
              </Panel>
          </Panel>

          <Released>
              <Callback Handler="{SliderReleased}" />
          </Released>

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

      </RangeControl>

      <BotonDePanico />
    </Panel>
</App>
2

Hi Cristian,

i build a quick sample for you…

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

<JavaScript>

    exports.handleUnlock = function() {
        //do something here...
	console.log('Unlocked...');
    }

</JavaScript>

<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" />
    </Circle>

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

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

</Rectangle>

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

3

Thanks!!! Work perfect!

4

glad to help :slight_smile: