Customizing the slider

The default slider is light gray with a dark gray fill and a white button. The knob has a very light drop shadow.

For customizing the look of the slider you have to know that it’s made of a few different layers:

• The slider itself.
• The fill (the area to the left of the knob that’s a different color), a child layer of the slider.
• And the knob, another child of the slider.

Changing the color of the slider is easy:

slider.backgroundColor = "red"

However, changing the fill or knob’s color has to be done on the child in question, like this:

slider.fill.backgroundColor = "green"
slider.knob.backgroundColor = "blue"

These are the visual properties of a SliderComponent that you can customize, together with their default values:

The following example changes each of these values:

slider.backgroundColor = "red"
slider.width = 400
slider.height = 20
slider.borderRadius = 0
slider.fill.backgroundColor = "green"
slider.knobSize = 60
slider.knob.borderRadius = 0
slider.knob.backgroundColor = "blue"
slider.knob.shadowColor = "yellow"
slider.knob.shadowX = 10
slider.knob.shadowY = 10
slider.knob.shadowBlur = 0

But since a slider is made of common layers (the slider itself and also the fill and knob), you can change any layer property.

Here I changed a few more properties on the knob.

slider.knob.props =
    size: 55
    y: -24
    rotation: 45
    borderWidth: 2, borderColor: "orange"
    gradient:
        start: "blue"
        end: "#0DF"
        angle: 45