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"
Download Framer project
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
Download Framer project
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
Download Framer project
An even stranger slider

Leave a Reply