Slider component » Customizing the slider
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:
Property Default value | Description |
---|---|
backgroundColor "#ccc" (light gray) | The color of the slider |
width 300 | The width of the slider |
height 10 | The height of the slider |
borderRadius 50 | Border radius of the slider’s endpoints |
fill.backgroundColor "#333" (dark gray) | The fill color, left of the knob |
knobSize 30 (Sets width and height) | The size of the knob |
knob.borderRadius 15 (A round knob) | Border radius of the knob |
knob.backgroundColor "#fff" (a.k.a. white) | The color of the knob |
knob.shadowColor "rgba(0,0,0,0.3)" (black, with 30% opacity) | The shadow color of the knob |
knob.shadowX 0 | The shadow’s x-axis offset |
knob.shadowY 2 | The shadow’s y-axis offset |
knob.shadowBlur 4 | The shadow’s blur |
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