A long time ago (one year or more) I posted an example of slider to use in HTA interfaces.
Here is another one, IMO better, leaner, and more precise because here you can use the keyboard sparrow by defaut to rise or lessen by tiny amounts.
The sample that follows contains the most essential codes you must know to do a slider.
But you may want to set css styles for font family, font size, spaces between characters, to make sure the ruler match the slider, in case your configuration by default is not exactely the same as mine.
(some css knowledge is therefore required)
If you want to modify the size, you will have to test it by modifying the hardcoded datas both in the
window_onLoad() sub and in the css style sheet.
There is a subtle ratio to find between the width mentioned in the css style sheet and the
innerHTML or
innerText contents of "
Slider" and "
Ruler" that you set in the
window_onLoad() sub.
<html>
<head>
<HTA:APPLICATION ID="sliderscr" APPLICATIONNAME="htaslide">
<title>SliderScroll 0.1</title>
<style type="text/css">
div.sliderbox {height:20px; width:612px; overflow:scroll; background-color:silver;}
div.sliderruler {height:20px; width:600px; background-color:silver;}
</style> <script language="VBScript">
Sub window_onLoad()
id("Slider").innerText = String(2000, "_")
id("Ruler").innerHtml = " " _
& Replace("||||1 ||||2 ||||3 ||||4 ||||5 ||||6 ||||7 ||||8 ||||9 ||||10", "|", "| ")
End Sub Function GetValue
id("test").innerText = Round( id("Slider").scrollLeft / 1540, 2)
End Function Function id(o)
Set id = document.getElementById(o)
End Function </script>
</head>
<body>
<span id="test">0</span>
<div id="Ruler" class="sliderruler"></div>
<div id="Slider" class="sliderbox" onscroll="GetValue"></div> </body>
</html>