- Get the wz_dragdrop.js file, either from the downlodable zip here or from the original Walter Zorn's page, http://www.walterzorn.com/dragdrop/dragdrop_e.htm
- Get a copy of the image files,
track.gif and 
sliderthumb.gif. You could use your own, but size is important since the code is related to it.
- Include this code in your webpage, inside the head section:
<script type="text/javascript">
/* Uses Walter Zorn's Drag'n'Drop & DHTML Library (GNU LGPL).
Integration with Jmol by Angel Herráez.
*/
function slabSlider()
{
Jmol.script( myJmol, 'slab ' + eval(100-(20+dd.elements.thumb.x-dd.elements.thumb.defx)) )
document.getElementById("posi").innerHTML = 100-(20+dd.elements.thumb.x-dd.elements.thumb.defx)
}
</script>
as well as the code needed to define Info and load JSmol.min.js
- Include this code in your webpage, inside the body section and before the position of the slider (we recommend to put it right after the opening <body> tag):
<script type="text/javascript" src="wz_dragdrop.js"></script>
- Include this code in your webpage, inside the body section at the position where you want the slider:
<img name="track" src="track.gif" width="104" height="29" alt="" title="" align="absmiddle">
<img name="thumb" src="sliderthumb.gif" width="18" height="29" alt="" title="move me" align="absmiddle">
<span id="posi"></span>%
- Include this code in your webpage, inside the body section and after the position of the slider (we recommend to put it right before the closing </body> tag):
<script type="text/javascript">
/* Courtesy of Walter Zorn;
Drag'nDrop & DHTML Library (c)Walter Zorn under the LGPL (Lesser General Public License, http://www.gnu.org/copyleft/lesser.html
*/
SET_DHTML("thumb"+MAXOFFLEFT+20+MAXOFFRIGHT+80+HORIZONTAL,"track"+NO_DRAG)
dd.elements.thumb.moveTo(dd.elements.track.x+20, dd.elements.track.y);
dd.elements.thumb.setZ(dd.elements.track.z+1);
dd.elements.track.addChild("thumb");
dd.elements.thumb.defx = dd.elements.track.x+20;
dd.elements.thumb.setDragFunc(slabSlider);
//dd.elements.thumb.setDropFunc(slabSlider); //alternative, if it cannot cope with the other
</script>
- That's it! Remember that to use slabbing in Jmol, you must first issue the command "slab on".
- You can see it all, integrated with Jmol, looking at the source code of the example page.
track.gif and 
sliderthumb.gif. You could use your own, but size is important since the code is related to it.