In this section, we will introduce a new widget called Slider. This widget will serve as a progression bar, but at the same time it will allow the user to forward and reverse the video. We will integrate the progression bar into the control bar, as shown in the following cropped screenshot:

As you can see, Slider appears to the left of the play/pause and stop buttons. Let's change controlbar.kv to add Slider to reflect this order. Let's start with the header of the file and the ControlBar class definition:

250. # File name: controlbar.kv
251. <ControlBar@GridLayout>:
252.     ...
253.     VideoSlider:
254.         value: root.progress
255.         max: 1
256.     VideoPlayPause:
257.         ...

VideoSlider will keep the value property updated with the progression of the video. The value property indicates the location of the slider on the bar, and the max property is the maximum value that it can take. In this case, 1 is appropriate because we express...