Slide 1

Slide notes: We will now look at an example of a page where we have set up 2 slider controls, and then we will have a look at how it's done.

Slide 2

Slide notes: A slider is a control we may use to make user selection easy and user friendly, and it usually will consist of 2 elements. One being the display of the current value and the other being the slider itself where the User can select a different value.

Slide 3

Slide notes:

Slide 4

Slide notes:

Slide 5

Slide notes:

Slide 6

Slide notes:

Slide 7

Slide notes:

Slide 8

Slide notes:

Slide 9

Slide notes:

Slide 10

Slide notes:

Slide 11

Slide notes: The example page was designed in a spreadsheet. With other html writers it is less of an issue, but with a spread sheet it is important to reserve enough space for the slider control.

Slide 12

Slide notes: As we can see here, we have merged a number of cells to provide the space for the slider display.

Slide 13

Slide notes:

Slide 14

Slide notes:

Slide 15

Slide notes: And for each of the 2 sliders, we have provided a tag immediately above to display the current value. Of course, we can position the displays any way we wish.

Slide 16

Slide notes: So let's look at the tags.

Slide 17

Slide notes:

Slide 18

Slide notes: This is the tag for our 1st slider. There is always a runtime name which is the name that will display and pass the slider value. We may set a minimum, maximum and default value, and we may also change the size of the slider if we wish.

Slide 19

Slide notes: Note the runtime value name that we are using here, which must be on the list of runtime names for this page, and this same name will also be used at the display field.

Slide 20

Slide notes:

Slide 21

Slide notes:

Slide 22

Slide notes:

Slide 23

Slide notes: The slider initial values are also set at the runtime list.

Slide 24

Slide notes: And we need to provide the field numbers on the runtime record where the values may be stored. We need to use field numbers that will not clash with any other fields we use for the same page.

Slide 25

Slide notes:

Slide 26

Slide notes:

Slide 27

Slide notes: This is the tag for the 2nd slider. We will remove the template now to show how we select and define it.

Slide 28

Slide notes:

Slide 29

Slide notes:

Slide 30

Slide notes:

Slide 31

Slide notes:

Slide 32

Slide notes:

Slide 33

Slide notes:

Slide 34

Slide notes:

Slide 35

Slide notes:

Slide 36

Slide notes:

Slide 37

Slide notes:

Slide 38

Slide notes:

Slide 39

Slide notes:

Slide 40

Slide notes:

Slide 41

Slide notes:

Slide 42

Slide notes:

Slide 43

Slide notes:

Slide 44

Slide notes: A slider must be accompanied by a tag where an input box is used to display the slider current value. This tag must use the same runtime name as the slider, and usually we will make it a 'display only' value.

Slide 45

Slide notes:

Slide 46

Slide notes:

Slide 47

Slide notes:

Slide 48

Slide notes:

Slide 49

Slide notes:

Slide 50

Slide notes:

Slide 51

Slide notes:

Slide 52

Slide notes: This is how we may easily provide 1 or more sliders on a page.