main page - page initiale - hauptseite - página principal projects - projets - projekte - proyectos authors - auteurs - autoren - autores papers - exposés - berichte - papeles help - aide - hilfe - ayuda

carto:papers:svg:examples:interactivity and svg gui:slider

SVG slider, Version 1.01, 2010-03-17, (see history at the end of the page)

This SVG slider object should assist authors of SVG web applications in creating user interfaces.

Why should you create SVG only web applications? Advantages of SVG only applications are flexiblity (you can control every single aspect of a SVG GUI element) and scalability (in SVG your userinterface elements are scalable as well). If you need a pixel-precise, scalable application, HTML is not very well suited, since HTML form elements don't scale well. SVG also potentially allows more sophisticated GUI elements than HTML provides, such as slider, dial knobs, complex colourpickers, etc. Disadvantages include complexity (more complex than using HTML form elements) and a potentially bad user experience, if your SVG GUI elements behave different than native GUI elements of the operating system the user is used to. Some browsers still don't support SVG to HTML or HTML to SVG communication. In that case you are sort of locked into doing everything with SVG in order to reach the broadest audience. Another advantage of creating SVG only applications is, that your applications also work in SVG viewers outside the webbrowser (e.g. Batik, eSVG or SVG embedded applications).

See an example of the SVG slider object. The scripts had been tested in Adobe SVG viewer version 3, version 6, Opera 9, Firefox/Mozilla SVG and Batik. The slider is free to use. If you do any substantial improvements, please send back your improvements to the author. The GUI elements of are licensed under the terms of the LGPL license and you need to distribute the license with your code. Additionally, you should create a link to in your project's "about page" or impressum. If you plan to use the GUI elements in a commercial product, please check back with the author of the GUI elements to investigate arrangements. The original URL for the slider is



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


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


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);
//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.


Version history


Last modified: Wednesday, 17-Mar-2010 22:40:06 CET
© carto:net ([an error occurred while processing this directive]andreas neumann & andré m. winter)
original URL for reference: Add this page to