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

stepSizeSize of steps in which to increment or decrease the rangeType Int. Default 1 slider.stepSize = 5
onSlideArray to append slide events.
positionCurrent position within the rangeType Int
minValueMinimum rangeType Int. Default 1
maxValueMaximum rangeType Int. Default 100

# 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

## SCDWidgetsSlideLineEvent

oldValuevalue before the slide
newValuevalue after the slide

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

(Script tags will be stripped)

# 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"

To replace the circle with an SVG image, use

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:

(Script tags will be stripped)

The result looks like this

(Script tags will be stripped)