Slider Feature on Native CrossPlatform Swift Mobile Apps
Tags: scade, swift, ios, android
Published: 2022-10-07 15:16:31

Slider control, commonly known as Carousel Slider on iOS and Android, is one of the most often used image sliders in most mobile apps such as eCommerce apps, social media apps, etc. nowadays. Slider Control is used in these mobile apps mostly for showing products, images, advertisements, and other content.

Thanks to [SCADE](https://www.scade.io/download/), mobile developers can now simply implement an image slider from scratch into their app projects with ease. This alone can help improve user experience as users can easily use this interesting feature to swipe left and right to see different items of their choice. 

In this article, you will learn how to use the Page Editor to implement and customize the Slider Control feature for your SCADE project.

## Slider Control's Properties: 
1. `Items`:   This property contains the data we want the slider to display. We use it to store the asset images for this project.
2. `elementProvider`: It is of type `SCDWidgetsElementProvider` responsible for mapping data to the slider's elements' visual controls.
3. `elements`: serve as a container for the slider's visual controls.
4. `onSlide`: It has an event handler that uses its `to-and-from properties` to detect slide events.
5. `selected`: used for sliding to a specific item.

## Implementation
You must follow the steps below to implement this feature in your SCADE project:

## Step1: Bind the slider's element to data from a defined Class

You can simply use a simpler data type or a class to describe the data container. Mind you, if you are going with the latter, you will need to make your newly created `class` a `subclass` of the `EObject class`. 

The screenshot below shows how to achieve this with a named `class` called `Pic` created in the `main.page.swift` file of our project:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/48vjive1j9ky0pypkcq8.png)

## Step2: Design the Page Editor 

Firstly, use the `Show Widget Palette` attribute of the SCADE-IDE to add (drag and drop) and center (if you want it centered on your app screen) the slider control widget to the `main.page`:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4rppnx2l8ph4fx16gcdd.jpeg)

## Step3: Define the logic for connecting data to Visual Controls

Next, use the slider's `elementProvider` property to define a provider object that is of type `SCDWidgetsElementProvider`. The defined provider object (of type SCDWidgetsElementProvider) is tasked with the duty of populating data to the slider's display element controls. 

For instance, we use the provider object we created inside `SCDWidgetsElementProvider` to connect the `image1 control` that we added inside the slider control in the previous step to the data container:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kfs6f9r75cr99nbhbatf.png)

## Step4: Provide the Data Container with the image data

Ensure the Data Container we have created in the first step has valid access to the data we want the slider control to have an effect on. 

As an illustration for this tutorial, we added the images we want the slider control to have an effect on to the Assets folder since that's what we initially provided in the Data Container to house the images to be displayed:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/thvxx8ct4fznzhmmsnfz.png)

That’s not all, the slider's `items` property also needs to store the list of images (i.e. data) before the slider can get to display them. 

For this tutorial, we simply used the created `filename` parameter (of type `String`) of the `Pic class` to collect the correct names of each image and store them as a list to the slider's `items` property:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qz9bmck9u6mr53w4pz4a.png)

**Output on iOS:**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pa3shzbzv7kne8dw1i20.gif)

**Output on Android:**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0sdubr4x265asmsgru8f.gif)

## Additional Features

1. ## Enable Slide Event

    You can simply use the slider's `onSlide` property to listen to sliding events via the `to` and `from` attributes of the `SCDWidgetsSlideEventHandler`:

    ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6aqmkftb825qrdn34vav.png)

    In other words, this feature enables you to determine the precise position of an item and perhaps use the information to improve your app project.

2. ## How to Slide to a Specific Item

    Aside from achieving the above output, you can also use another slider property called `selected` to start the slide from a particular item.

    How do you achieve this? It’s simple, initialize the `selected` property to the index of the item (image) of your choice. For example, you can set `selected` = 1 so that the slider control can go to the 2nd item since the item count begins at 0:

    ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1h0ocuwpnkx3xx88p8r6.png)

    **Note:** this can only be achieved in the `show method` (and not in the `load method`).

3. ## Having access to a more generic elementProvider
    We have used the simpler approach of the `elementProvider` in the earlier part of this tutorial to connect data to the visual control inside the slider control of our project. However, a generic `elementProvider` can also accomplish the same thing and even give you access to more technical attributes that you can use to configure your slider.

    For example, we use the position property of this `elementProvider` to connect data from the
`items` property of the slider to the visual control:

    ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ercfk9qfpe9bbukn0l3d.png)

## Conclusion 

I covered how to create and use a slider control in Cross Platform Swift mobile apps in this article. We also learned how to add some new features and adjust the slider control to our liking.

The source code for this tutorial is available on GitHub: [Slider Control](https://github.com/Cdf-creator/SliderControl).