Slider
The Slider is a component that allows the selection of a value by dragging a button. Figure 11.1 shows a slider.
Figure 11.1. The slider
The Slider class is the template for all sliders. It is a direct child class of Baseslider. The Baseslider class in turn extends the Basevaluecomponent class, a direct descendant of Basecomponent. Figure 11.2 shows the class hierarchy for the Slider class.
Figure 11.2. The Slider class hieararchy
The Basevaluecomponent class is an abstract class that represents a value. It defines a new attribute, value, and a new method, getValue. The attribute of the Basevaluecomponent class is given in Table 11.1.
| Name | Usage | Type | Default | Accessibility |
|---|---|---|---|---|
| value | Tag and JS | string | null | read-write |
| Description. The value contained in the Basevaluecomponent. | ||||
The getValue method has the following signature.
getValue()
Returns the value of the value attribute.
The Baseslider class defines many of the attributes in a slider. These attributes are given in Table 11.2.
| Name | Usage | Type | Default | Accessibility |
|---|---|---|---|---|
| bordersize | Tag and JS | number | 1 | read-write |
| Description. The border size in pixels. | ||||
| keystep | Tag and JS | number | 2 | read-write |
| Description. The number of units to increment or decrement the value every time the slider slides. | ||||
| maxvalue | Tag and JS | number | 100 | read-write |
| Description. The maximum allowable value. | ||||
| minvalue | Tag and JS | number | 0 | read-write |
| Description. The minimum allowable value. | ||||
| showfill | Tag and JS | boolean | true | read-write |
| Description. Indicates whether or not the slider’s fill area should be shown. | ||||
| showrange | Tag and JS | boolean | true | read-write |
| Description. Indicates whether or not the range text should be displayed when the slider is being dragged. | ||||
| showvalue | Tag and JS | boolean | true | read-write |
| Description. Indicates whether or not the value text is shown when the slider is being dragged. | ||||
| thumbheight | Tag and JS | number | 18 | read-write |
| Description. The height of the thumb in pixels. | ||||
| thumbwidth | Tag and JS | number | 10 | read-write |
| Description. The width of the thumb in pixels. | ||||
| trackheight | Tag and JS | number | 8 | read-write |
| Description. The height of the track in pixels. | ||||
The Baseslider class adds several methods to access some of its attributes:
getMaxValue()
Returns the maximum value.
getMinValue()
Returns the minimum value.
getPercentage()
Returns the percentage of the range selected by the value.
setMaxValue(value)Sets the maximum value.
setMinValue(value)Sets the minimum value.
setPercentage(percentage)Sets the percentage of range from the minimum value to the maximum value.
The Slider class is a visual implementation of Baseslider and does not add new attributes or methods.
For example, the code in Listing 11.1 uses the slider to control the opacity of a view.
Listing 11.1. Using the slider
<canvas width="500" height="250">
<simplelayout axis="y"/>
<view width="100" height="100" bgcolor="black"
opacity="${parent.s.value/100}"/>
<slider name="s" width="100" value="50"/>
</canvas> |
You can use this URL to test and run the application.
http://localhost:8080/lps-4.0.x/app11/sliderTest1.lzx
The generated application looks like the picture in Figure 11.3.
Figure 11.3. Using the slider
