ColdFusion Day 57:

ColdFusion Day 57:

================

USING CFSLIDER TO CREATE SLIDER CONTROLS

The next Java-based form field you will look at is created with the CFSLIDER tag. This tag builds a slider control that is ideal for selecting a value from a numerical range (such as ages, weights, and size). Figure 14.16 shows a sample slider control.

FIGURE 14.16: A slider control

Sample Slider Current Value: 50

===========||=============

Aside from attributes used for form validation, which we will cover in Chapter 15, the CFSLIDER tag uses several attributes to control it behavior and usual appearance. These attributes are described in the following section.

CONTROLLING A SLIDER BEHAVIOR

Slider control's behavior is determined by the numeric range supported by the control and the increments by which the control can change the value of the field. For instance, a control may have a numeric range from 0 to 100 but could then have an increment of 10 (which means there are 11 possible values for the field: 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, and 100) or it could have an increment of 1 (which would mean that the field has 101 possible values - every integer from 0 to 100 inclusive).

These two values are specified using the following attributes:

RANGE Specifies the left and right values of the slider range. The numbers should be separated by a comma. For instance, the range 0 to 100 (which is the default range if none is specified) is indicated with RANGE="0, 100".

SCALE Specifies the increment for the control. By default the increment is 1.

Therefore, in the preceding examples, the first control with an increment of 10 would use the attributes RANGE="0, 100" SCALE="1".

You need to consider some practicalities of combing range and increment settings. The basic rule is this: The left and right values of the range preferably should each be a multiple of the increment value. For instance, the range RANGE="24, 100" with an increment SCALE=12 will work properly for the left value of the range: 24 is a multiple of 12. This displays as shown in the following graphic.

Test Value: 24

||========================

However, notice how the right value of the slider is 96, the closest multiple of 12 that is less than the specified right value of the range, as shown in the following graphic

Test Value: 96

========================||

Similarly, the same issues apply to the left value of the range. If you change the increment to SCALE=11, then suddenly the left value of the range becomes 22, the closest multiple of 11 that is less than the specified left value of range (see the following graphic).

Test Value: 22

||========================

NOTE By default, the slider will load with the control placed at the specified left value of the range. However, as the preceding slider shows, the control can be dragged to the left, in this case to 22.

In addition to specifying the range and increment of a control, you can also specify a default initial value using the VALUE attribute. Generally, you will want to make this value a multiple of the increment within the specified range. If the value specified doesn't meet those criteria, then the slider will display the default value (even if it is out of range). But after the slider is moved, then it is not possible to return it to the specified value.

By way of example, the following attributes

RANGE="24, 96" SCALE=12 VALUE=36

work well and initially appear with the value shown in the following graphic

Test Value: 36

======||==================

However, if you set the value to 10

RANGE="24, 96" SCALE=12 VALUE=10

Then the initial value of the slider will be 10 even though this is out of range (as shown in the following graphic). However, as shown the slider moves, the value will immediately be within the specified range, and it will be impossible to drag the slider back to the default value of 10.

Test Value: 10

||========================

The sliders you have seen so far have a fairly bland appearance with a dark gray slider groove and a light gray background. By default this is the way that sliders look: gray with no label or display of the slider's current value. For instance, the tag <CFSLIDER NAME="SliderTest"> produces the results shown in the following graphic.

||========================

As the samples you have already seen show, it is possible to include a text label for a slider. this is done with the LABEL attribute. When a label is specified, the label will be displayed, immediately followed by the current value of the slider. therefore, the tag <CFSLIDER NAME="SliderTest" LABEL="Test Slider"> produces the results shown in the following slider.

Test Slider16

||========================

Notice, however, that the current value of the slider appears immediately next to the last letter of the label. This can be easily addressed by adding the necessary spaces to the end of the label: <CFSLIDER NAME="SliderTest" LABEL="Test Slider: ">. The end result is shown in the following slider.

Test Slider: 0

||========================

Labels offer one additional feature: You can display the current value in the middle of the label text. To do this, use %value% at the place in your label where you want the current value to appear. For instance, the tag <CFSLIDER NAME="SliderTest" LABEL="Value is %value% percent."> produces the following slider.

Value is 26 percent.

=====||===================

But, what about situations where you want to label a slider without displaying the current value? With the LABEL attribute alone, this isn't possible. However, you can use the REFRESHLABEL attribute to achieve the desired result. According to the definition of this attribute in the ColdFusion documentation, the purpose of this attribute is to indicate whether the label should be refreshed as the slider is moved. Possible values are yes and no (the default value is Yes).

The effective result of setting REFRESHLABEL to No is that the current value of the slider is not displayed in the label. therefore, in the first label example that has the current value immediately next to the label, adding REFRESHLABEL="No" produces acceptable results. In other words, <CFSLIDER NAME="SliderTest" LABEL="TestSlider" REFRESHLABEL="No"> produces the results shown in the following graphic.

Test Slider

===========||=============

When using a label, it can also be useful to be able to specify a font, size and color for the label. This can help make the sliders more attractive and fit the style into the overall look and feel of the form and website in question. Just as with the CFTEXTINPUT tag, font type and size is specified with the FONT and FONTSIZE attributes. In addition, the BOLD and ITALIC attributes enable those style features to be specified.

For instance, in the slider you just created, you could change the font to times, change the size to 14 points, and make the text bold with the following tag:

This tag produces the following slider

Test Slider

||========================

In the examples you have seen so far, all the sliders have been of a default size, regardless of the range and increment being used. For instance, the two sliders

Value: 64

===============||=========

Value: 544

===========||=============

This default size is 144 pixels wide by 40 pixels deep. However, you can override these defaults by using the WIDTH and HEIGHTS attributes, which specify the desired size of a slider in pixels. For instance, you can make the second slider twice as wide as the first by adding WIDTH=228 to the tag:

This addition results in the following sliders.

Value: 0

||========================

Value: 0

||========================

Similarly, the height of the same slider can be doubled using HEIGHT=80 to create the slider shown below.

Value: 0

||========================

Value: 0

||===================================================

The vertical and horizontal space around a control can be specified using VSPACE and HSPACE. Therefore, if you don't want the two controls in our example to be right next to each other, you can add five pixels of vertical space to the second slider with VSPACE=5. The end result is the following ColdFusion code:

This code produces two sliders with space between them as shown below.

Value: 0

||========================

Value: 0

||=======================================================

Another group of attributes controls the colors of the slider: GROOVECOLOR, BGCOLOR and TEXTCOLOR. All three of these can take hexadecimal RGB triplets in the form ##XXXXXX or XXXXXX as values of one of the following color names:

Black

Magenta

Cyan

Orange

Darkgray

Pink

Gray

White

Lightgray

Yellow

The GROOVECOLOR attribute defines the color of the groove in the centre of the slider. The BGCOLOR attribute specifies the color of the background of the entire element (including the label), and the TEXTCOLOR attribute indicates the color of the text.

For instance, the tag

produces the following slider.

Test Value: 53

===========||============= (Sorry this is not colored for illustration)

Finally, you need to look at two attributes that enable you to use an image inside the groove of the slider rather than a simple solid color. This is done with the IMG and IMGSTYLE attributes.

IMG specifies the image file to use in the groove. IMGSTYLE indicates how to display the image. There ate three possible values for the IMGSTYLE attribute:

CENTERED The image is shown in the centre of the groove.

TILED The image is repeated, in a tiled fashion, in the groove.

SCALED The image is stretched to fit in the groove. This is the default value for the IMGSTYLE attribute.

NOTE CFSLIDER is a Java control. As with CFTEXTINPUT control, it has a default message for non-java browsers, and you can specify your own message using the NoTSUPPORTED attribute.

When using the CFSLIDER tag in your forms, the value if the sliders available in the template that the form is submitted to in the same way as any other standard form field through a form variable with a name corresponding to the field name. Throughout this chapter you have used the same name for your sliders (SlidersTest). Therefore, in the template processing the form submission, you can use Form.SlidersTest to access the value of the slider at the time of submission.

Back Next