The knobs

The knobs are draggable layers with their constraints set to the slider itself.

Momentum

The knob’s have momentum so you can throw them, but you can switch this off.

# Disabling momentum on the left knob
rangeSlider.minKnob.draggable.momentum = no

Size of the knobs

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

But you can also set each knob’s size, or their width and height independently.

# Making the right knob rectangular
rangeSlider.maxKnob.props =
    width: 20
    height: 50

The knobs’ hit area

Instead of dragging the knobs you can also tap to the left or right of them (only not on the fill). You can expand this ‘hit area’ to a wider area than just the slider, like this:

# A range slider with a bigger hit area
rangeSlider = new RangeSliderComponent
    hitArea: 100