Documentation

Requirements

To use the slider, your project needs to meet the following requirements:

• the svg root element needs to have a viewBox attribute set (e.g. viewBox="0 0 1100 700")
• you need to link to the following scripts in your SVG header to use the slider: mapApp.js, helper_functions.js and slider.js; please note, that not all of the functions in these files are needed. The depencies are listed below.
• you need to include the global variable "myMapApp" of type "mapApp" into one of your js files, (e.g. var myMapApp = new mapApp();)
• you need to create an svg group element with a unique id in an appropriate position of your document tree to hold the graphics of the slider (e.g. <g id="slider1" />)
• it is recommended to place a background rectangle behind your SVG application to receive events on the root element level, e.g. loosing focus and calling the callback function when clicking outside of the slider
• you need to initialize the slider as described below

Features

• sliders can be horizontal, vertical or diagonal
• slider lines and symbols can be individually styled, using arrays with presentation attributes
• sliders can have any start and end values, in between values are linearly interpolated
• sliders call callback functions either immediately when moving the slider, or after the slider was released
• sliders can be repositioned
• the slider value can be set to different values by script
• scripts may query the current slider value at any time

Dependencies on external functions

1. slider.js:
   • all of the objects and functions in this file are necessary
2. mapApp.js:
   • all of the objects and functions in this file are necessary
3. helper_functions.js:
   • all the global variables at the top of the file
   • function getTransformToRootElement()
   • function leftOfTest()
   • function intersect2lines()
   • function toPolarDist()
   • function toPolarDir()

Constructor

The following constructor function creates the slider:

var slider = new slider(id,parentNode,x1,y1,value1,x2,y2,value2,startVal,sliderStyles,invisSliderWidth,sliderSymb,functionToCall,mouseMoveBool);
Example:
//first the slider styles
var sliderStyles={"stroke":"dimgray","stroke-width":3};
var invisSliderWidth = 15;
slider1 = new slider("slider1","slider1",710,65,0,710,165,100,50,sliderStyles,invisSliderWidth,"sliderSymbol",showVal,true);

The arguments are the following:

1. id (String):
   unique id for the slider
2. parentNode (String or node reference):
   group id or node reference to the parent group that will contain the slider geometry
3. x1 (number, in viewBox coordinate system):
   start point x-coordinate of the slider
4. y1 (number, in viewBox coordinate system):
   start point y-coordinate of the slider
5. value1 (number, float):
   the start value of the slider
6. x2 (number, in viewBox coordinate system):
   end point x-coordinate of the slider
7. y2 (number, in viewBox coordinate system):
   end point y-coordinate of the slider
8. value2 (number, float):
   the end value of the slider
9. startVal (number, float):
   the initial value of the slider, after the slider was initialized
10. sliderStyles (array of literals with presentation attributes):
    an array literal containing the presentation attributes of the slider line; could include CSS classes; should at least include a "stroke" and "stroke-width" attribute; example: var sliderStyles={"stroke":"dimgray","stroke-width":3};
11. invisSliderWidth (number, in viewBox coordinate system):
    the stroke-width of an invisible slider line, the stroke-width should be as large or larger than the stroke-width of the visible slider line. It is typically as wide as the slider symbol is wide. The reason behind this invisible slider line is to receive events, even if the visible slider line is very thin.
12. sliderSymb (String, unique id):
    id of the <symbol /> element containing the slider symbol geometry. This slider symbol is dragged along the slider line.
13. functionToCall (function or object or undefined):
    callBackFunction: you can pass a function, object or undefined. In the case of function and object the parameters returned are: the changetype (string ("release"|"change")), the id of the slider (string) and the slider value (number, float): In case of an object, it calls the method .getSliderVal(). In case of an undefined value, no callBack function is executed.
14. mouseMoveBool (boolean, true|false):
    indicates whether the slider should provide immediate feedback while dragging, or not.

Methods

• .getValue():
  returns the current value of the slider (number)
• .setValue(value,fireFunction):
  sets the current value of the slider (number). The second parameter indicates whether the callBack function should be fired or not
• .moveTo(x1,y1,x2,y2):
  repositions the slider. The fist coordinate indicates the start of the slider, the second indicates the end of the slider
• .removeSlider():
  removes all slider geometry from its parent group. The slider isn't usable any more, after calling this method.

Version history

• 0.99 (not documented, around 2001): initial version
• 1.0 (2006-08-04): changed constructor parameters (added id, parentNode), removed parameter sliderGroupId, added documentation, added method .moveTo()
• 1.01 (2010-03-17): fixed a problem with Firefox 3.6, it wouldn't process events on horizontal or vertical lines if the opacity is set to zero. Now it is set to 0.001. evt.preventDefault() added to prevent unwanted dragging of SVG graphic.

Credits

• Kevin Lindsey (tutorials on his website)