Framer Classic » 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"
Open in Framer
Background, fill and knob color changed

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
Open in Framer
A cubistic slider

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
Open in Framer
An even stranger slider

Leave a Reply