📘

Sourcecode

Please see the UgSliderControlDemo project for the source code created in this chapter. See Installing examples for information on how to download the examples.

The Sliderline control is a range control that allows you to set a range. We will rename sliderline to slider control in a later release.

SCDWidgetsSliderLine

Creating simple range control

1. Drop two labels onto page together with horizontal layout that we use to display the range position. Name the first label lbPercentage
2. Drop sliderline control onto page
3. Create reference to sliderline control and append onSlide event
4. Set the percentage variable from within the event. Use the ev.newValue and cast it to String

import ScadeKit

class MainPageAdapter: SCDLatticePageAdapter {
	
	@objc dynamic var percentage : String = "0"

	// page adapter initialization
	override func load(_ path: String) {		
		super.load(path)
		
		let slider  = self.page!.getWidgetByName("sliderline1") as! SCDWidgetsSliderLine
		slider.onSlide.append(SCDWidgetsSlideLineEventHandler{ ev in self.onSlide(ev:ev)})
	}
	
	func onSlide(ev:SCDWidgetsSlideLineEvent) {
		
		let oldValue = ev.oldValue
		let newValue = ev.newValue
		self.percentage = "\(ev.newValue)"		
		print("Old ---> new \(oldValue), \(newValue)")
	}
}

SCDWidgetsSlideLineEvent

Finally, bind the percentage variable to the lbPercentage.text value of the SliderLine control:

Customizing the slider

As all our SVG controls are SVG based, customizing the slider is easy. For instance, you want to replace the circle with a rectangle. Simply goto the source tab in the page editor and replace the eclipse tag with a rectangle tag. But please make sure your add the template-id="node-bullet"

<rect template-id="node-bullet" fill="#00BF00" width="9" id="svg_1" height="30" stroke="#000000" stroke-width="0.5"/>

To replace the circle with an SVG image, use

<image template-id="node-bullet" xlink:href="/UgSliderControlDemo/res/automobile.svg" width="80" preserveAspectRatio="xMidYMid slice" height="36" scade:height="size.h"/>

In the screenshot, the default setting marked in green, the customized box setting in blue and an especially nice one using an SVG image i stored in res/automotive.svg in red:

The result looks like this