Slider control
Using slider control in Cross Platform Swift on Android and iOS
The slider control allows you to implement Carousel like functionality where you can swipe left and right to display different items:
Naming of control
The current naming of Slider control and Slider line control is a bit confusing. We will rename Sliderline control to Slider control, and Slider control to something like Scroll control in the future.
- What you know from iOS and Android as slider is called SliderLine
- Slider control is known as Carousel in iOS and Android

Use Class to describe data container
First, we want to use data from the Pic class to bind to the slider's element. You can use a class or a simpler data type. If you use a class, you currently still need to inherit from EObject.
import ScadeKit
class Pic : EObject {
let url : String
init(_ filename:String) {
self.url = "./assets/\(filename)"
}
}
Design the page
- Add the slider control and center it.
- Insert an image control within the slider control

Add code to main page
You use the elementProvider attribute to specify a provider object of type SCDWidgetsElementProvider. A provider maps data to the slider's display element controls, you use it to populate the controls within the slider's elements.
self.slider1.elementProvider = SCDWidgetsElementProvider { (item: Pic, template) in
guard let image = template.getWidgetByName("image1") as? SCDWidgetsImage else { return }
image.url = item.url
image.contentPriority = false
}
Capture slide event and slider positions
The event is of type SCDWidgetsSlideEventand has the attributes to and from. In this example, we use to in order to get the url of the Pic object.
Using the items property you can access the next data object we are sliding to.
// Use the onSlide handler to capture slide events
self.slider1.onSlide.append(SCDWidgetsSlideEventHandler { e in
guard let nextpos = e?.to, nextpos>=0 && nextpos<self.slider1.items.count else { return }
let picNext = self.slider1.items[nextpos] as! Pic
print(picNext)
})
Slide to a specific item
The item count starts at zero, so to goto 2nd item, set .selected = 1. You cannot use the property in the load method(), use the show method instead
override func show(view: SCDLatticeView?) {
super.show(view:view)
// selected works only within the show function
self.slider1.selected = 1
}
Using a more generic element provider
You can use the raw SCDWidgetsElementProvider init method to have access to more technical attributes
slider.elementProvider = SCDWidgetsElementProvider { item in
guard let slider = item?.target as? SCDWidgetsSlider,
let pos = item?.position else { return nil }
guard let newElement = slider.template?.copyControl() as? SCDWidgetsGridView,
!newElement.children.isEmpty,
let image = newElement.getWidgetByName("image1") as? SCDWidgetsImage else { return nil }
image.url = "Assets/\(pos + 1).png"
image.contentPriority = false
return newElement
}
Properties and methods
Name | Description | Values |
---|---|---|
selected:Int | Specifies which element of the slider's elements is displayed | 0 .. (number of elements)-1 Works only in the show() method |
elementProvider: SCDWidgetsElementProvider | Holds object that maps data to slider's elements visual controls. | |
onSlide:[SCDWidgetsSlideEventHandler] | Add event handler to capture slide events. The event has to and from attributes. | -1 if you try to slide left to the beginning and there is no more item - collection size +1 if you try to swipe right and there is no more element - to and from contain the respective index number |
items:Any | List of items that represent the data that should be displayed | If you use a class, it has to inherit from EObject. |
elements:SCDWidgetsElement | List of elements. Elements represent the container for the visual controls displayed in the slider |
Updated almost 2 years ago