The composite component has the same size and shape as the <input> tag and the input field preserves any other settings (e.g., input assist) that was set on it.
The component handles the same numbers as the NumberConverter.
The JSFSlider component adds a helper button to an <input> field which can be used to pop up the display of a slider which in turn can be used to choose a number.
The helper button is added to the right of the input field. The input field retains (exactly) all of its original characteristics though now incorporating the button. For example, if the input field is defined to be 120px wide, when the helper button is added the combined component is now 120px wide. The button assumes style properties that match the input field, e.g., its borders match the borders of the input field. Applicable attributes applied to the input field, such as disabled, are also reflected to the button.
The popup containing the slider behaves like a "normal" Windows® popup, that is, if you click outside the popup, the popup disappears and no change is made to the value. When you mouse down inside the popup, the "stylus" is moved to the nearest tick and moving the mouse moves the stylus to another value. Releasing the mouse button selects the value. Choices in the slider are always "to a tick", that is, the slider is discontinuous (you can't choice a value between two ticks).
The popup is normally displayed below the input field, left edges aligned. If the popup does not "fit" below the input field (i.e., if the input field is near the bottom of the window), it's displayed above the input field.
All the pieces of the popup and slider can be styled (via CSS) except the size of the slider. The slider's width can be explicitly set via an attribute specified when the slider is constructed. The height of the slider is computed based on the content.
The JSFSlider requires a NumberConverter. The converter is used to convert the value of the input field (a string) to/from a JavaScript™ number object. It's also used to format the number labels displayed in the slider. The converter should be constructed before the slider is constructed and the ID of the converter passed to the slider. The input field may also have a NumberValidator and/or NumberAssist component associated with it. If a validator is associated with the input field, it must be passed to the JSFSlider (as an attribute of the constructor). The validator is used to construct the minimum and maximum bounds of the slider so it's strongly recommended that one be provided. If an Assist is associated with the input field, it does not need to be associated with the JSFSlider.
<hx:inputText>
<input type="text">
The value of the slider is passed as the value of the input field. The value should be formatted in the style described by the converter associated with the component. If no value is initially passed to the page, the slider has no initial value.
All attributes associated with an input of type text are supported.
All event handlers associated with an input of type text are supported.
hX_5.addComponent("id", new hX_5.JSFSlider(attributes)); where
id |
The ID of the HTML tag to which the component is attached. |
attributes |
Comma separated list of attributes where each attribute is a quoted string consisting of the attribute name and value separated by a colon, for example "label:MyLabel". |
Attribute name |
Description |
---|---|
converter |
The ID of a converter that has already been constructed. The converter describes the format of the value in the input field. |
validator |
The ID of a validator that has already been constructed. If the validator is supplied, the constraints described in the validator are used limit the values a user can pick. |
css-prefix |
The base class of a set of CSS classes that describe the visual appearance. |
increment |
Increment between "ticks" in the slider. For example, if the minimum is 1 and the maximum is 10, an increment of 1 draws a tick at 1,2,3,4,5,6,7,8,9 and 10. Only values marked with a tick can be selected in the slider. Value may be fractional (for example, .01). |
label-increment |
How often to draw a label under a tick. A value of one draws a label under every tick. A value of two draws a label under every other tick and so on. |
show-labels |
If specified, the name of the currently selected color is displayed in the input field on top of the color swatch. If omitted, the name is not displayed and the input field displays only a color swatch showing the currently selected color. Note that the color name is in the input field in all cases (for accessibility reasons), this option makes the name visible. |
scale-width |
The width of the scale in pixels. |
button-border |
Controls how the popup button is drawn relative to the input field. |
button-color |
Specifies the background-color of the button. By default the background color matches the border color of the input field. |
The CSS for a slider is fairly minimal. The class(es) applied to the input tag style the input field (e.g., set the border of the input field) and by extension, the popup button next to it (the popup button is styled to match the input field's border). A second set of classes style the popup slider. The set of classes used to style the popup follow the usual hxclient naming convention where there is a single "base class name" and all other classes used to style the slider use that base name with a suffix. By default, the slider is styled using the base class inputText_Slider. The css-prefix attribute can be used to specify a different base class.
CSS class name |
Description |
---|---|
base_Slider |
Styles the div that contains the slider. Note that setting the size (width/height) of the div does not change the size of the slider (neither the scale or the popup). To change the width, use the scale-width attribute. The height is always computed. The font properties of the class are used to style any text in the slider. |
<base>_Slider-Body |
Styles scale and stylus (the content) of the slider. The color property colors the scale. background-color and border style the stylus. |
API call |
Description |
---|---|
redraw() |
Redraw the component taking into account any changes made to the attributes/properties of the base tag. |
uirelease() |
Releases any active UI associated with the component. |
setValue(string) |
Sets the value of the component and ensures that the value provided is valid. |
object = getValue(boolean) |
Retrieves the value of the component. If the boolean is false, this is equivalent to getting the value of the base tag. If the boolean is true, the value is returned as a JavaScript date/time object instead of as a string. |
object = setAttribute(attribute) |
Sets an attribute or changes its value (if it was set previously). |
string = getAttribute(attribute-name) |
Retrieves the current value of an attribute. |
The slider is fully keyboard accessible. Both the input field and the picker button are in the tab order. In the input field, the up and down arrow keys can be used to increment/decrement the value by an increment. Pressing the up/down arrow will "spin" the value by increments until the key is released. When the button has focus, pressing the spacebar displays the slider and focus is moved to the "stylus". While the slider has focus, pressing spacebar selects the current value (closing the popup and returning focus to the button). Pressing ESC closes the popup, returning focus to the button and leaves the value unchanged. Pressing the left or right arrow changes the value.
The slider currently does not report XML roles/states (it is however XHTML compliant). This will be added as soon as possible.
Add a slider to a field where the format of the number is a percent. Limit the slider to contain values between 0 and 100%. Specify the ticks to be drawn every 1 percent and the labels every 10 percent. Use the specified CSS class to draw the slider in black and white with a drop-shadow.
<style> .inputText1_Slider { background-color:white; border:1px; border-style:solid; border-color:windowframe; font-family: sans-serif; font-decoration: none; color: black; outline-color: gray; outline-width: 4px; -moz-outlineColor: #E4E4E5; -moz-outline-width: 4px; } .inputText1_Slider_Body { background-color:silver; color: threedshadow; border-style:solid; border-color:threedhighlight; border-right-color:threedShadow; } </style> <script> hX.addConverter("x1", new hX.NumberConverter("strict:1", "pattern:##0%", "locale:,.%‰-$")); hX.addValidator("x1", new hX.NumberValidator( "min-bound:0.0", "max-bound:1.0", "required:true")); hX.addComponent("form1:text1", new hX.JSFSlider("css-prefix:inputText1", "increment:.01", "label-increment:10","converter:x1","validator:x1")); </script>