Tags:
create new tag
, view all tags

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):

slider-samp.png

... 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: '&nbsp;'
}

%SLIDERCONTROL{ name="sliderEx01" from="5" to="50" step="2.5" initvals="40" round="1" dimension="&nbsp;" }%

%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: '&nbsp;$'
}

%SLIDERCONTROL{ name="sliderEx02" from="5000" to="150000" step="1000" width="600px" initvals="10000;40000" heterogeneity="['50/50000']" dimension="&nbsp;$"}%

%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: '&nbsp;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="&nbsp;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=" m2" }%

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)
    • Set DEBUG = 0

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:
    • enter samples here

Plugin Info

Plugin Author: TWiki:Main.AaronLWalker
Plugin Version: 17 Dec 2010(V0.500)
Change History:  
01 Dec 2010: Initial version
Dependencies:
NameVersionDescription
TWiki::Plugins::JQueryPlugin>=1.0Required; download from TWiki:Plugins/JQueryPlugin
License: GPL (Gnu General Public License)
TWiki:Plugins/Benchmark: GoodStyle nn%, FormattedSearch nn%, SliderControlPlugin nn%
Plugin Home: http://TWiki.org/cgi-bin/view/Plugins/SliderControlPlugin
Feedback: http://TWiki.org/cgi-bin/view/Plugins/SliderControlPluginDev
Appraisal: http://TWiki.org/cgi-bin/view/Plugins/SliderControlPluginAppraisal

Topic attachments
I Attachment History Action Size Date Who Comment
Unknown file formatmd5 SliderControlPlugin.md5 r1 manage 0.2 K 2010-12-31 - 21:24 AaronLWalker  
Compressed Zip archivetgz SliderControlPlugin.tgz r1 manage 30.6 K 2010-12-31 - 21:23 AaronLWalker  
Compressed Zip archivezip SliderControlPlugin.zip r1 manage 36.5 K 2010-12-31 - 21:23 AaronLWalker  
Unknown file formatEXT SliderControlPlugin_installer r1 manage 4.4 K 2010-12-31 - 21:24 AaronLWalker  
Edit | Attach | Watch | Print version | History: r8 < r7 < r6 < r5 < r4 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r8 - 2013-10-16 - PeterThoeny
 
  • Learn about TWiki  
  • Download TWiki
This site is powered by the TWiki collaboration platform Powered by Perl Hosted by OICcam.com Ideas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.
Copyright © 1999-2015 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.