Framer Classic » Range slider » Customizing the slider

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"
Open in Framer
Different colors for background, fill and the knobs

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

Property
Default value
Description
backgroundColor
"#ccc" (light gray)
The color of the slider itself
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, between the knobs
knobSize
30 (Sets width and height)
The size of the knobs
minKnob.borderRadius
maxKnob.borderRadius
15 (Round knobs)
Border radius of the knobs
minKnob.backgroundColor
maxKnob.backgroundColor
"#fff" (a.k.a. white)
The color of the knobs
minKnob.shadowColor
maxKnob.shadowColor
"rgba(0,0,0,0.3)" (black, with 30% opacity)
The shadow color of the knobs
minKnob.shadowX
maxKnob.shadowX
0
The shadow’s x-axis offset
minKnob.shadowY
maxKnob.shadowY
2
The shadow’s y-axis offset
minKnob.shadowBlur
maxKnob.shadowBlur
4
The shadow’s blur

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
Open in Framer
Do you like my slider?

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

Leave a Reply