The ScrollBar control, like the Slider control discussed earlier, represents a numeric value with its thumb, and enables the user to choose a numeric value by dragging its thumb. The ScrollBar control is typically used in conjunction with other nodes to define a new UI component, the ScrollPane and ListView serving as two examples of this. In Step 29 you interacted with the ScrollBar, shown in Figure 6-10, to control the value of the ProgressBar directly above it. The following snippet from Listing 6-12 contains the code that realizes the ScrollBar-related portions of this behavior:

As with the Slider, the range of the ScrollBar is set through its min and max properties, which in this case are –1 and the value of the maxKph instance variable located in the StarterAppModel class. Also, the value property of the ScrollBar is bidirectionally bound to the kph property in the model, which is used for keeping the ProgressBar updated as you experienced in Step 29. The following code snippet from Listing 6-1 contains the relevant instance variables from our StarterAppModel class: