[VCLab-Main] [Software] [Local Slider Applet]

Local Slider Applet 3.10

This applet realizes a slider for changing of a given value within an interval [min,max] in steps of given size. Moving the slider the value will be assigned to a JavaScript variable. Optionally a JavaScript statement can be executed.

The following is the minimal form shown using an example:

     <applet code=lslider.class archive="lslider.jar" name="sliderval" height="50" width="200" MAYSCRIPT>

     </applet>

This statement will generate a slider element of 200 x 50 pixels and assign the value to the JavaScript variable sliderval. The applet shown below is generated by this statement.

Hot Links

Parameters ---- Methods ---- Examples ----- Download

Slider Applet Syntax at Glance

<applet code=slider.class archive="lslider.jar" height="50" width="200"

        name="sliderval"   MAYSCRIPT>
<param  name="var"         value="JavaScript variable">

<param  name="text"        value="true | false |
                         left | right |

                         top  | bottom">

<param  name="textcols"    value="4">

<param  name="orientation" value="horizontal | vertical">

<param  name="min"         value="100">

<param  name="minlock"     value="true | false">

<param  name="x0"          value="500">

<param  name="max"         value="1000">

<param  name="maxlock"     value="true | false">

<param  name="steps"       value="100">

<param  name="bgcolor"     value="FFFFFF">

<param  name="tfgcolor"    value="000000">

<param  name="tbgcolor"    value="FFFFFF">

<param  name="sbgcolor"    value="00FF00">">

<param  name="script"      value="JavaScript statements">

</applet>

Slider Parameters

The applet can be parametrized with optional parameters with the general parameter syntax
<param name="name" value="value">
Parameter Type Code Syntax
Applet name 
<applet name="appletname" ...>
       appletname = slider (default)
This optional parameter is part of the applet main statement and not included in the optional parameter section. It is the applet object name on the page. The name can be used for referencing the applet when using slider applet methods.
Slider variable 
<param name="var" value="JavaScript variable">
Name identifier of the JavaScript variable associated with the slider. The default name is the name of the applet as given above by appletname. If appletname is not specified slider is used.
Lower limit 
<param name="min" value="low">
The lower limit of the slider is given by low. The default value is -1.
Upper limit 
<param name="max" value="high">
The upper limit of the slider is given by high. The default value is 1.
Start value 
<param name="x0" value="start">
When starting the applet this start value is taken as the initial value. If not specified, the mean value of the range [low,high] is taken.
Step size 
<param name="steps" value="number of steps">
Moving the slider, the value is changed in small increments, which are specified by the number of steps which divide the range [low,high].
Slider orientation 
<param name="orientation" value="direction">
direction = horizontal (default)
            vertical
Text fields The lower limit, the upper limit and the actual value of the slider can be displayed and entered in text fields. These fields have different default positions depending on the slider orientation. 
<param name="text" value="position">

position = true    the fields are displayed (default)
           false   no fields are visible
           top     fields at the top if direction = horizontal

           bottom  fields at the bottom if direction = horizontal (default)

           left    fields left of the slider if direction = vertical

           right   fields right of the slider if direction = vertical (default)
Text columns 
<param name="textcols" value="number of text columns">
The number of character positions in the text fields is given by number of text columns. The default value is 4.
Lower limit lock 
<param name="minlock" value="lock">
       lock = false (default)
              true
If this value ist true, changing of the lower limit in the text field is not possible.
Upper limit lock 
<param name="maxlock" value="lock">
       lock = false (default)
              true
If this value ist true, changing of the upper limit in the text field is not possible.
Surrounding background color The default surrounding (applet) background color can be modified by the hex value rrggbb 
<param name="bgcolor" value="rrggbb">
Text foreground color The applet text default foreground color (default: black) can be modified by the hex value rrggbb 
<param name="tfgcolor" value="rrggbb">
Text background color The applet text default background color (default: white) can be modified by the hex value rrggbb 
<param name="tbgcolor" value="rrggbb">
Slider background color The default slider background color can be modified by the hex value rrggbb 
<param name="sbgcolor" value="rrggbb">
JavaScript expression execution 
<param name="script" value="JavaScript statements">
JavaScript string to be executed after a slider move. This action is performed after the slider variable has been set.
The JavaScript statements are restricted: it is not possible to call any Java applet or plugin methods directly or indirectly via this JavaScript interface.

Slider Methods

Methods Syntax
Set values <applet name>.setValue(low, value, high)
This method modifies als values in the text fields and the slider values.
Set value <applet name>.setValue(value )
This method modifies the value of the slider and the text field.
Get value <applet name>.getValue()
This method returns the current slider value.
This method is only available in version >= 3.10.
Enable/Disable text input <applet name>.setEnabled(boolvalue)
boolvalue = true: the text field input of this applet is enabled.
boolvalue = false: the text field input of this applet is disabled.
Disable text input <applet name>.disable()
The text field input of this applet is disabled.
Not available in Java 1.1 version. Use setEnabled.
Enable text input <applet name>.enable()
The text field input of this applet is enabled.
Not available in Java 1.1 version. Use setEnabled.

Examples

Example Type Code Example
Sliders without text 
<APPLET CODE="lslider.class"
ARCHIVE="lslider.jar"
HEIGHT="20" WIDTH="100"

NAME="slider1" MAYSCRIPT>
<PARAM name="text" value="false">

<PARAM name="min" value="10.1">
<PARAM name="x0" value="15">

<PARAM name="max" value="99.35">
<PARAM name="sbgcolor" value="10a010">

</APPLET>
 
<APPLET CODE="lslider.class"
ARCHIVE="lslider.jar"
HEIGHT="100" WIDTH="15"

NAME="slider2" MAYSCRIPT>
<PARAM name="text" value="false">

<PARAM name="min" value="-55">
<PARAM name="max" value="55">

<PARAM name="sbgcolor" value="ff0000">
</APPLET>
Sliders with text
with/without lock option,
different text sizes

and
script parameter		 
<APPLET CODE="lslider.class"
ARCHIVE="lslider.jar"
HEIGHT="50" WIDTH="200"

NAME="slider3" MAYSCRIPT>
<PARAM name="text" value="top">

<PARAM name="min" value="100">
<PARAM name="x0" value="500">

<PARAM name="max" value="1000">
<PARAM name="maxlock" value="true">

<PARAM name="minlock" value="true">
<PARAM name="bgcolor" value="d9efff">

<PARAM name="tbgcolor" value="000000">

<PARAM name="tfgcolor" value="ffffff">
</APPLET>
 
<APPLET CODE="lslider.class"
ARCHIVE="lslider.jar"
HEIGHT="150" WIDTH="110"

NAME="slider4" MAYSCRIPT>
<PARAM name="text"value="left">

<PARAM name="orientation" value="vertical">
<PARAM name="min"value="10000">

<PARAM name="x0" value="50000">
<PARAM name="max"value="100000">

<PARAM name="bgcolor" value="d9efff">

<PARAM name="textcols" value="8">

</APPLET>
 
<APPLET CODE="lslider.class"
ARCHIVE="lslider.jar"
HEIGHT="150" WIDTH="80"

NAME="slider4" MAYSCRIPT>
<PARAM name="text"value="left">

<PARAM name="orientation" value="vertical">
<PARAM name="min"value="100">

<PARAM name="x0" value="500">
<PARAM name="max"value="1000">

<PARAM name="var"value="s">

<PARAM name="script" 
value="alert('slider4 moved to '+s);">

<PARAM name="bgcolor" value="d9efff">

</APPLET>
Slider methods
enable/disable

and
action parameter		 
<FORM>
<INPUT TYPE="button" VALUE="enable"
ONCLICK="document.slider5.setEnabled(true)">
<INPUT TYPE="button" VALUE="disable"

ONCLICK="document.slider5.setEnabled(false)">
</FORM>
<APPLET CODE="lslider.class"
ARCHIVE="lslider.jar"
HEIGHT="50" WIDTH="200"

NAME="slider5" MAYSCRIPT>
<PARAM name="var" value="Ts">

<PARAM name="action" value="fTs=-2*Ts;">

<PARAM name="min"value="100">
<PARAM name="x0" value="500">

<PARAM name="max"value="1000">
<PARAM name="bgcolor" value="d9efff">

<PARAM name="sbgcolor" value="9DD6F7">

<PARAM name="tbgcolor" value="d9efff">

<PARAM name="tfgcolor" value="0000ff">
</APPLET>
Slider methods
setValue
getValue		 
<APPLET CODE="lslider.class"
ARCHIVE="lslider.jar"
HEIGHT="150" WIDTH="80"

NAME="slider6" MAYSCRIPT>
<PARAM name="orientation" value="vertical">

<PARAM name="min"value="100">
<PARAM name="x0" value="500">

<PARAM name="max" value="1000">
<PARAM name="bgcolor" value="d9efff">

</APPLET>
<FORM NAME="f"
<INPUT TYPE="button" VALUE="set slider values"

ONCLICK="document.slider6.setValue(-200,0,200)">
<BR>
<INPUT TYPE="button" VALUE="set slider value"
ONCLICK="document.slider6.setValue(150)"><BR>
<INPUT TYPE="button" VALUE="get slider value"
ONCLICK="document.f.getval.value=
  document.slider6.getValue()"><BR>
<INPUT TYPE="TEXT" NAME="getval" SIZE="10">
</FORM>



Local Slider Download

The local slider applet can be downloaded below.

The lslider 3.0 works on Java 1.0 and higher versions. It does not work on all new browsers.
Download lslider.zip (19 KB)
The lslider 3.10 is only for Java >=1.1 versions and for new browsers.
Currently NS6 has problems in executing scripts and returning values. Use the getValue() method.
Download lslider.jar (4 KB)

[VCLab-Main] [Software] [Local Slider Applet]

© CS 1996, 1997, 1998, 2001, 2002