SVG simple slider

Engineers want to control technical parameters. They like to do that with their hands.

The implementation is really simple and the slider works quite good. SVG is great.

1. You can drag the thumb with the mouse or click anywhere onto the slider.
2. The slider is designed as an SVG group with the thumb as a child group.
3. DOM-2 events are used in this example. You can reimplement attribute events without problems.
4. A custom attribute "xoffset" is used to obtain the sliders value in a simple manner. Though it is not necessary.
5. A callback function is called whenever the slider changes it's value .. and rotates the triangle here.

The result looks good, but there are several drawbacks:

1. You get a fixed range of values 0 .. 200 here.
2. You cannot simply have vertical sliders.
3. You cannot simply have multiple sliders without intensive geometry and code growth (A clever object oriented approach should help here).

Use this example for your own improved version. Here is the code

<?xml version="1.0" encoding="iso-8859-1"?>
<svg xml:space="preserve" width="500" height="300" onload="OnLoadEvent(evt)">
   <g id="slider" transform="translate(150 270)" xoffset="150">
		<rect x="0" y="0" width="210" height="20" style="fill:#c0c0c0" />
      <line style="stroke:black;stroke-width:2;" x1="5" y1="6" x2="205" y2="6" />
      <line style="stroke:white;stroke-width:2;" x1="5" y1="8" x2="205" y2="8" />
      <path style="stroke:black;fill:none;" d="M5,16 5,20 M25,16 25,20 M45,16 45,20 M65,16 65,20 M85,16 85,20 M105,16 105,20 M125,16 125,20 M145,16 145,20 M165,16 165,20 M185,16 185,20 M205,16 205,20" />
      <g id="thumb" transform="translate(0 0)">
         <path style="stroke:none;fill:#c0c0c0;" d="M1,2 1,12 5,15 9,12 9,2 Z" />
         <path style="stroke:white;fill:none;" d="M9,1 1,1 1,11" />
         <path style="stroke:black;fill:none;" d="M5,16 10,12 10,2" />
      </g>
   </g>
   <path id="animateable" transform="translate(250,150) rotate(0)" style="stroke:black;fill:green;" d="M-25,-50 25,-50 0,0 Z" />
<script><![CDATA[
// == Slider object ==============================================
var slider=null, thumb=null, animateable=null, sliderActive = false;

// -----------------------------------------------------------
function SliderDown(event)
{
   sliderActive = true;
}
function SliderUp(event)
{
   sliderActive = false;
   window.status = "slider is inactive";
}
function SliderMove(event)
{
   var value = event.getClientX() - parseFloat(slider.getAttribute("xoffset")) - 4;
   if (sliderActive && value > 0 && value < 200)
   {
      thumb.setAttribute("transform", "translate(" + (value) + " 0)");
      SliderCallback(value);
   }
}
function SliderClick(event)
{
   var value = event.getClientX() - parseFloat(slider.getAttribute("xoffset")) - 4;
   if (value > 0 && value < 200)
   {
      thumb.setAttribute("transform", "translate(" + (value) + " 0)");
      SliderCallback(value);
   }
}
function SliderCallback(val)
{
   animateable.setAttribute("transform", "translate(250,150) rotate(" + (val/200*360) + ")");
}

// == event handler ===============================================
function OnLoadEvent(event) // called, when svg file is loaded (s. onLoad=..) ..
{
   var doc = event.getTarget() != null ? event.getTarget().getOwnerDocument() : null;
   if (doc != null)
   {
      slider = doc.getElementById("slider");
      thumb = doc.getElementById("thumb");
      animateable = doc.getElementById("animateable");
      slider.addEventListener("mousedown", SliderDown, false);
      slider.addEventListener("mouseup", SliderUp, false);
      slider.addEventListener("mousemove", SliderMove, false);
      slider.addEventListener("click", SliderClick, false);
   }
}

]]></script> 
</svg>

Kevin Lindsey has created an excellent, easy to use slider object. I definitely recommend to adopt that one.

© 2000 MecXpert