Framer Cheat Sheets: Slider & Range sliders

Learn to make sliders and range sliders in Framer.This cheat sheet is for users with a bit of experience as well as a reference for users with more experience.

Published in

Designing Humans

8 min readJun 12, 2017

By now you should have a pile of sexy pages and scroll components —so now it is time for a new challenge my friends! Let’s bring everything you already know and use them with sliders.

Like the other Cheat Sheets in this series, we will look at the very basics, simple properties and commonly used patterns. This was written for people like me — who aren’t so great at writing code, but are ninjas with good old cmd+c & cmd+v.

In this Framer Cheat sheet, we will look at the following:

What is the difference between a Slider and a Range Slider?
Anatomy of a slider
Styling
Vertical Slider
Values
Disable
Animate to
Events
Common examples

1. What is the difference between a Slider and a Range Slider?

Sliders need only one value to be inputted. They also indicate a specific degree or quantity of something. How many items? How loud? How long? How big? etc.

Range Sliders need two values to be inputted. This could be date ranges, price ranges, distance ranges, etc.

2. Anatomy of a slider

When you create a new SliderComponent or RangeSliderComponent — you automatically create 3 or 4 layers respectively.

A SliderComponent has 3 layers, namely the SliderComponent itself, the knob and the fill . Because the knob and fill are children on the slider, you will have to style them differently.

A RangeSliderComponent has 4 layers, namely the RangeSliderComponent itself, the minKnob, the maxKnob, and the fill. The minKnob will be on the left by default, and the maxKnob will be on the right. Because the knobs and fill are children on the range slider, you will have to style them differently.

3. Styling

Styling a slider and a range slider is exactly like styling 3 (or if using a range slider — 4) layers. Your whole component, your fill and your knob(s). Learn more about styling layers.

Styling the slider

Styling the slider is like styling a layer. You can choose position, height, width, colour etc.

#left example
slider = new SliderComponent
   width: 300
   height: 8
   x: Align.center
   y: Align.center
   backgroundColor: "#144C50"#right example
range = new RangeSliderComponent
   width: 300
   height: 8
   x: Align.center
   y: Align.center
   backgroundColor: "#BD6A41"

Fill styling

The fill shows what is selected in terms of range or amount.

For a slider component you might not always need a fill. For example, if you are choosing the degree of something (e.g. how big it is) you won’t need a fill, but if you are choosing the quantity of something (e.g. how many of something) then you will.

A range slider will usually need a fill for it to make sense.

The fill is styled the same way in a SliderComponent and a RangeSliderComponent .

#left example
slider.fill.backgroundColor = "rgba(255,255,255,0.8)"#right example
range.fill.backgroundColor = "rgba(255,255,255,0.8)"

knob styling (Slider Component only)

Styling the knob is almost like styling a layer. Because the knob was created when you first made the slider, you have to style it like so,

slider.knob.size = 40
slider.knob.borderRadius = 40
slider.knob.backgroundColor = "#258992"
slider.knob.borderWidth = 2
slider.knob.borderColor = "#fff"

Min and max knob styling (Range Slider Component only)

Styling the minKnob and maxKnob is like styling a normal slider’s knob.

range.minKnob.size = 40
range.minKnob.borderRadius = 40
range.minKnob.backgroundColor = "#FF9661"
range.minKnob.borderWidth = 2
range.minKnob.borderColor = "#fff"
 
range.maxKnob.size = 40
range.maxKnob.borderRadius = 40
range.maxKnob.backgroundColor = "#FF9661"
range.maxKnob.borderWidth = 2
range.maxKnob.borderColor = "#fff"

Do I feel a little bit dirty about the amount of times I said knob in the last section? Yes. Yes I do.

4. Vertical Slider

Making a vertical slider is easier than it looks. All you have to do is make the height’s value higher than the width.

#left example
slider = new SliderComponent
   width: 10
   height: 100#right example
range = new RangeSliderComponent
   width: 10
   height: 100

5. Values

The point of a slider is to read in a values inputted by a user. So how do we set the range of those values?

Min and Max values

The min (on the left) by default is 0 and the default max is 1 . You can of course change this to anything you want. You can also make the max value lower than the min .

slider = new SliderComponent
   min: 0
   max: 100range = new RangeSliderComponent
   min: 0
   max: 100

Value (Slider Component only)

The value is the determined by the knob’s current position. To set the starting value of the knob, you set the value on the slider. By default it will be the min value.

slider = new SliderComponent
   min: 0
   max: 100
   value: 75

MinValue and maxValue (Range Slider Component only)

The minValue is determined by the current position of theminKnob and the maxValue is determined by the current position of the maxKnob.

range = RangeSliderComponent
  min: 0
  max: 100
  minValue: 25
  maxValue: 75

6. Disable Slider

Depending on your prototype, you may not want the slider to be clickable. This sounds counter productive — but surprisingly, I have used this quite a lot.

NOTE: When you disable a slider, you also have to disable it’s knob.

slider = new SliderComponentslider.sliderOverlay.off Events.TapStart
slider.knob.draggable = falsebutton = new Layerbutton.onClick ->
   slider.value = 0.5

7. Animate to

You might want to animate your knob to a specific point on load or on an event.

Animate to value (SliderComponent only)

If you want your slider’s knob to move to specific point, you can use animateToValue.

slider = new SliderComponent
   min: 0
   max: 100
   value: 0slider.animateToValue(75, { curve: Spring })

Animate to min/maxValue (RangeSliderComponent only)

Animating to the minValue and the maxValue is similar to animating to a value on a slider.

range = new RangeSliderComponent
   min: 0
   max: 100
   minValue: 43
   maxValue: 56range.animateToMinValue(20, {curve: Spring})
range.animateToMaxValue(80, {curve: Spring})

8. Events

on Value change

When you use .onValueChange it calls for an update when the slider’s value changes — usually by dragging the knob, but can also be triggered from some where else. The old syntax is slider.on "change:value", -> .

slider = new SliderComponent
   min: 0
   max: 100
   minValue: 25number = new TextLayer
   text: 25slider.onValueChange ->
   number.text = Math.round(slider.value)

PRO TIP: You can also use .knob.onDrag and .knob.onMove — this relates to the actual movement of the knob and not just the value of the slider. However, .onDrag means that if you let go of the knob and it still moves due to momentum — the number’s text won’t change.

slider = new SliderComponent
   min: 0
   max: 100
   value: 50number = new TextLayer
   text: 50slider.knob.onDrag ->
   number.text = Math.round(slider.value)

Range slider onValue Change

range = new RangeSliderComponent
   min: 0
   max: 100
   minValue: 25
   maxValue: 75number1 = new TextLayer
   text: 25number2 = new TextLayer
   text: 75range.onValueChange ->
   number1.text = Math.round(range.minValue)
   number2.text = Math.round(range.maxValue)

PRO TIP: You can also use .onDrag and .onMove — this relates to the actual movement of the knobs and not jus the value of the slider.

range = new RangeSliderComponent
   min: 0
   max: 100
   minValue: 25
   maxValue: 75number1 = new TextLayer
   text: 25number2 = new TextLayer
   text: 75range.minKnob.onDrag ->
   number1.text = Math.round(range.minValue)range.maxKnob.onDrag ->
   number2.text = Math.round(range.maxValue)

.onDragEnd and .onDragStart

.onDragEnd and .onDragStart are useful if you want something to happen when you drag the knob. In the below example, we change the knob colour when you start dragging.

slider = new SliderComponent
slider.center()slider.knob.backgroundColor = "#258992"slider.knob.onDragStart ->
   slider.knob.backgroundColor = "#fff"slider.knob.onDragEnd ->
   slider.knob.backgroundColor = "#258992"

Using the .onDragEnd and .onDragStart events are the same on the range slider except you use it with the .minKnob and .maxKnob .

range = new RangeSliderComponent
range.center()range.minKnob.backgroundColor = "#FF9661"
range.maxKnob.backgroundColor = "#FF9661"
range.minKnob.onDragStart ->
 range.minKnob.backgroundColor = "#fff"
 
range.maxKnob.onDragStart ->
 range.maxKnob.backgroundColor = "#fff"
 
range.minKnob.onDragEnd ->
 range.minKnob.backgroundColor = "#FF9661"
 
range.maxKnob.onDragEnd ->
 range.maxKnob.backgroundColor = "#FF9661"

9. Common examples

Here are a few common examples of slider and range slider components that I have used. For ease sake, I have made a slider and range slider in the same file.

Snap to value

Value flyout

Filter items using slider

Toggle’s changing colour on drag

Hopefully this cheat sheet helped you, and if it didn’t or you want to learn more about something else, please leave a comment bellow, and I will update :)