Q1379 How can I create a horizontal slider control?

You are here: irt.org | FAQ | DHTML | Q1379 [ previous next ]
Try:
<html>

<head>

<script language="JavaScript"><!--
var ob;

function mousedown(e) {
    if (document.layers) ob = document.layers[e.target.name], X = e.x;
    else if (document.all) ob = event.srcElement.parentElement.style, X = event.offsetX;
}

function mousemove(e) {
    if (ob && document.layers && (e.pageX-X) < 201 && (e.pageX-X) > 49) ob.moveTo((e.pageX-X), 10);
    else if (ob && document.all && (event.clientX - X) < 201 && (event.clientX - X) > 49) ob.pixelLeft = event.clientX-X + document.body.scrollLeft;
}

function mouseup() { ob = null; }

if (document.layers) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
document.onmousedown = mousedown, document.onmousemove = mousemove, document.onmouseup = mouseup;
// --></script>
</head>

<body>

<div style="position:absolute; left:50; top:10;">
<table cellspacing="0" cellpadding="0" border="0"><tr><td bgcolor="#cccccc" width="150" height="25">&nbsp;</td></tr></table>
</div>

<div id="s" style="position:absolute; left:50; top:10;">
<img src="slider.gif" name="s" width="2" height="25" border="0">
</div>

</body>

</html>