Customizing the slider

The default slider is light gray with a dark gray fill and white buttons. The knobs have 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 between the knobs that’s a different color), a child layer of the slider
• The minKnob on the left, another child of the slider
• And the maxKnob on the right, a sibling of both the left knob and fill

Changing the color of the slider is easy:

rangeSlider.backgroundColor = "red"

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

rangeSlider.fill.backgroundColor = "orange"
rangeSlider.minKnob.backgroundColor = "blue"
rangeSlider.maxKnob.backgroundColor = "green"

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

The following example changes each of these values:

rangeSlider.backgroundColor = "red"
rangeSlider.width = 400
rangeSlider.height = 20
rangeSlider.borderRadius = 5
rangeSlider.fill.backgroundColor = "green"
rangeSlider.knobSize = 60
rangeSlider.minKnob.borderRadius = 0
rangeSlider.maxKnob.borderRadius = 5
rangeSlider.minKnob.backgroundColor = "blue"
rangeSlider.maxKnob.backgroundColor = "blue"
rangeSlider.minKnob.shadowColor = "yellow"
rangeSlider.maxKnob.shadowColor = "yellow"
rangeSlider.minKnob.shadowX = 10
rangeSlider.maxKnob.shadowX = 10
rangeSlider.minKnob.shadowY = 10
rangeSlider.maxKnob.shadowY = 10
rangeSlider.minKnob.shadowBlur = 0
rangeSlider.maxKnob.shadowBlur = 0

In the above project, I changed a few more properties on the maxKnob, to show that these are all common layers of which you change any property.

# changing a few more properties on “maxKnob”
rangeSlider.maxKnob.props =
    size: 55
    y: -24
    rotation: 45
    borderWidth: 2
    borderColor: "orange"
    gradient:
        start: "blue"
        end: "#0DF"
        angle: 45