Value change events

You can track changes to both the slider’s values with a single onValueChange event.

Here’s an example. The slider’s max is set to 100 (instead of the default 1), its initial minValue and maxValue are set to 15 and 85, and I use onValueChange to update the labels on the knobs.

rangeSlider.onValueChange ->
    # Update the min value label
    minValueLabel.text = Utils.round this.minValue
    # Update the max value label
    maxValueLabel.text = Utils.round this.maxValue

I added Text Layers as child layers to the knobs, and am updating their text with the current values (after passing them through ? Round to get a whole number).

Events for separate buttons

A range slider has two values, of course, and you can track them independently with onMinValueChange and onMaxValueChange.

This will work the same as the former example:

rangeSlider.onMinValueChange ->
    # Update the min value label
    minValueLabel.text = Utils.round this.minValue
rangeSlider.onMaxValueChange ->
    # Update the max value label
    maxValueLabel.text = Utils.round this.maxValue

But once the user touched more than one knob both onMinValueChange and onMaxValueChange will be called on every change (probably because of small decimal changes), so you might as well use onValueChange.

Using onMove

To truly track the movement of just one single knob you better listen to its onMove event.

# Using “onMove” to track only the left button
rangeSlider.minKnob.onMove ->
    minValueLabel.text = Utils.round @parent.minValue

(The @parent of the knob is of course the slider itself.)