Slider component » The knob

The knob

The knob is simply a draggable layer with its constraints set to the slider itself.


The knob’s momentum is enabled (so you can throw it), but you can, of course, switch this off.

# Disable momentum
slider.knob.draggable.momentum = no
A slider with momentum (= default) and one without
Download Framer project

Size of the knob

The knobSize property sets both the width and height of the knob (like size on any other layer).

But if you don’t want a round or square knob you can always set knob.width and knob.height independently.

The knob’s hit area

Normally you have to tap on the slider (or drag the button) for it to react, but you can expand this ‘hit area’ by giving a value to the property of the same name, like this:

# a slider with a bigger hit area
slider = new SliderComponent
    hitArea: 100
Download Framer project
The bottom slider has a bigger ‘hit area’