<!DOCTYPE html>
<
html
>
<
head
>
<
script
type
=
"text/javascript"
src
=
"prototype.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"scriptaculous.js?load = slider"
>
</
script
>
<
script
>
window.onload = function () {
new Control.Slider('handle', 'track', {
range: $R(1, 100),
values: [1, 10, 20, 30, 40,
50, 60, 70, 80, 90, 100],
sliderValue: 1,
onSlide: function (value) {
$('sliderValue').innerHTML
= 'Slider Position: ' + value;
}
});
}
</
script
>
<
style
>
.track {
background-color: rgb(0, 0, 0);
position: relative;
height: 10px;
width: 200px;
cursor: pointer;
}
.handle {
background-color: #13e421;
height: 20px;
width: 4.25px;
top: -4.25px;
cursor: move;
}
</
style
>
</
head
>
<
body
>
<
div
id
=
"track"
class
=
"track "
>
<
div
id
=
"handle"
class
=
"handle"
style
=
"width: 10px;"
>
</
div
>
</
div
>
<
p
id
=
"sliderValue"
></
p
>
</
body
>
</
html
>