Sliderline control
Slider control to select value on a scale
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
Variable | Description | Comment |
---|---|---|
stepSize | Size of steps in which to increment or decrease the range | Type Int. Default 1 slider.stepSize = 5 |
onSlide | Array to append slide events. | |
position | Current position within the range | Type Int |
minValue | Minimum range | Type Int. Default 1 |
maxValue | Maximum range | Type Int. Default 100 |
Creating simple range control
- Drop two labels onto page together with horizontal layout that we use to display the range position. Name the first label lbPercentage
- Drop sliderline control onto page
- Create reference to sliderline control and append onSlide event
- 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
Variable | Description | Comment |
---|---|---|
oldValue | value before the slide | |
newValue | value after the slide |
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
Updated about 6 years ago