SliderControlPlugin
This plugin provides an implementation of the JQuery slider as created by
Egor Khmelev.
Syntax Rules
You type |
you get |
%SLIDERCONTROL% |
a basic slider with default values, essentially for testing |
%SLIDERCONTROL{<attributes>}% |
is the full syntax |
Attributes recognized
Attribute |
Meaning |
Default |
name="..." |
Unique name for slider, as well as parameter name for usage in forms (string) |
defaultSliderName |
from="<n>" |
Left limit (numeric) |
1 |
to="<n>" |
Right limit (numeric) |
10 |
initvals="<n[;n...]>" |
Initial values for pointer(s) |
7 |
step="<n>" |
Step/interval of pointer (numeric) |
1 |
width="<n>" |
Width of slider |
400px |
round="<n>" |
How many numbers after comma (numeric) |
|
heterogeneity="<n>" |
Linearity of scale (percentage of place)/(value of place) (array) |
|
dimension="<n>" |
Text to show after number (string) |
|
limits="<n>" |
Show limits or not (boolean) |
|
scale="..." |
Labels under slider (array) |
|
calculate="..." |
Function to calculate final numbers, for example time |
|
onstatechange="..." |
Function fires while slider change state |
|
callback="..." |
Function fires on mouseup event |
|
...also see the attributes used in the examples below
SLIDERCONTROL
Examples
Basic Slider
%SLIDERCONTROL%
... gives (simulated):
... if installed:
%SLIDERCONTROL%
Simple example slider
Goes from 0 to 100, in increments of 10, with the slider at an initial position of 60.
{
from: 0,
to: 100,
step: 10,
initvals: 60
}
%SLIDERCONTROL{ name="sliderEx00" from="0" to="100" step="10" initvals="60" }%
%SLIDERCONTROL{ name="sliderEx00" from="0" to="100" step="10" initvals="60" }%
Rounding slider
{
from: 5,
to: 50,
step: 2.5,
initvals: 40,
round: 1,
dimension: ' '
}
%SLIDERCONTROL{ name="sliderEx01" from="5" to="50" step="2.5" initvals="40" round="1" dimension=" " }%
%SLIDERCONTROL{ name="sliderEx01" from="5" to="50" step="2.5" initvals="40" round="1" dimension=" " }%
Range slider
Adds a dollar sign to the value, sets the width at 600px, and introduces heterogeneity. Notice how the value
50000
shows up at the 50% point of the line.
{
from: 5000,
to: 150000,
initvals: 10000;40000,
heterogeneity: ['50/50000'],
step: 1000,
width: 600px,
dimension: ' $'
}
%SLIDERCONTROL{ name="sliderEx02" from="5000" to="150000" step="1000" width="600px" initvals="10000;40000" heterogeneity="['50/50000']" dimension=" $"}%
%SLIDERCONTROL{ name="sliderEx02" from="5000" to="150000" step="1000" width="600px" initvals="10000;40000" heterogeneity="['50/50000']" dimension=" $"}%
Example slider
Adds scale markings.
{
from: 0,
to: 500,
initvals: 100;200,
heterogeneity: ['50/100', '75/250'],
scale: [0, '|', 50, '|' , '100', '|', 250, '|', 500],
limits: false,
step: 1,
dimension: ' m<small>2</small>'
}
%SLIDERCONTROL{ name="sliderEx03" from="0" to="500" initvals="100;200" heterogeneity="['50/100', '75/250']" scale="[0, '|', 50, '|' , '100', '|', 250, '|', 500]" limits="false" step="1" dimension=" m<small>2</small>" }%
%SLIDERCONTROL{ name="sliderEx03" from="0" to="500" initvals="100;200" heterogeneity="['50/100', '75/250']" scale="[0, '|', 50, '|' , '100', '|', 250, '|', 500]" limits="false" step="1" dimension=" m
2" }%
Example slider
{
from: 1,
to: 30,
initvals: 1;30,
heterogeneity: ['50/5', '75/15'],
scale: [1, '|', 3, '|', '5', '|', 15, '|', 30],
limits: false,
width: 6in,
step: 1
}
%SLIDERCONTROL{ name="sliderEx04" from="1" to="30" step="1" initvals="1;30" limits="false" width="6in" heterogeneity="['50/5', '75/15']" scale="[1, '|', 3, '|', '5', '|', 15, '|', 30]" }%
%SLIDERCONTROL{ name="sliderEx04" from="1" to="30" step="1" initvals="1;30" limits="false" width="6in" heterogeneity="['50/5', '75/15']" scale="[1, '|', 3, '|', '5', '|', 15, '|', 30]" }%
Schedule slider
Uses the
calculate
attribute to create a nice time range slider.
{
from: 480,
to: 1020,
step: 15,
initvals: 720;960,
scale: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00'],
limits: false,
width: 100%,
calculate: function( value ){
var hours = Math.floor( value / 60 );
var mins = ( value - hours*60 );
return (hours < 10 ? "0"+hours : hours) + ":" + ( mins == 0 ? "00" : mins );
}
}
%SLIDERCONTROL{ name="sliderEx05" from="480" to="1020" step="15" limits="false" initvals="720;960" width="100%" scale="['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00']" calculate="function( value ){var hours = Math.floor( value / 60 ); var mins = ( value - hours*60 ); return (hours < 10 ? \"0\"+hours : hours) + \":\" + ( mins == 0 ? \"00\" : mins );}" }%
%SLIDERCONTROL{ name="sliderEx05" from="480" to="1020" step="15" limits="false" initvals="720;960" width="100%" scale="['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00']" calculate="function( value ){var hours = Math.floor( value / 60 ); var mins = ( value - hours*60 ); return (hours < 10 ? \"0\"+hours : hours) + \":\" + ( mins == 0 ? \"00\" : mins );}" }%
Plugin Settings
Plugin settings are stored as preferences variables. To reference a plugin setting write
%<plugin>_<setting>%
, i.e.
%INTERWIKIPLUGIN_SHORTDESCRIPTION%
- Default SliderControl Settings
- #Set NAME = defaultSliderName
- #Set FROM = 1
- #Set TO = 10
- #Set INITVALS = 7
- #Set STEP = 1
- #Set WIDTH = 400px
- #Set ROUND =
- #Set HETEROGENEITY =
- #Set DIMENSION =
- #Set LIMITS =
- #Set SCALE =
- #Set SKIN =
- #Set CALCULATE =
- #Set ONSTATECHANGE =
- #Set CALLBACK =
- One line description, is shown in the TextFormattingRules topic:
- Set SHORTDESCRIPTION = JQuery-based slider input
- Debug plugin: (See output in
data/debug.txt
)
Plugin Installation Instructions
Note: You do not need to install anything on the browser to use this plugin. The following instructions are for the administrator who installs the plugin on the server where TWiki is running.
- Download the ZIP file from the Plugin web (see below)
- Unzip
SliderControlPlugin.zip
in your twiki installation directory. Content: File: | Description: |
data/TWiki/SliderControlPlugin.txt | Plugin topic |
lib/TWiki/Plugins/SliderControlPlugin.pm | Plugin Perl module |
pub/TWiki/SliderControlPlugin/jquery.dependClass.js | Plugin static files |
pub/TWiki/SliderControlPlugin/jquery.slider.js |
pub/TWiki/SliderControlPlugin/jquery.slider-min.js |
pub/TWiki/SliderControlPlugin/jslider.blue.css |
pub/TWiki/SliderControlPlugin/jslider.blue.ie6.css |
pub/TWiki/SliderControlPlugin/jslider.blue.png |
pub/TWiki/SliderControlPlugin/jslider.css |
pub/TWiki/SliderControlPlugin/jslider.ie6.css |
pub/TWiki/SliderControlPlugin/jslider.plastic.css |
pub/TWiki/SliderControlPlugin/jslider.plastic.ie6.css |
pub/TWiki/SliderControlPlugin/jslider.plastic.png |
pub/TWiki/SliderControlPlugin/jslider.png |
pub/TWiki/SliderControlPlugin/jslider.round.css |
pub/TWiki/SliderControlPlugin/jslider.round.ie6.css |
pub/TWiki/SliderControlPlugin/jslider.round.plastic.css |
pub/TWiki/SliderControlPlugin/jslider.round.plastic.ie6.css |
pub/TWiki/SliderControlPlugin/jslider.round.plastic.png |
pub/TWiki/SliderControlPlugin/jslider.round.png |
pub/TWiki/SliderControlPlugin/slider-samp.png |
- Test if the installation was successful:
Plugin Info