<!DOCTYPE html>
<
html
>
<
head
>
<
script
type
=
"text/javascript"
src
=
"prototype.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"scriptaculous.js?load = slider"
>
</
script
>
<
style
type
=
"text/css"
>
.track {
width: 250px;
background-color: orange;
height: 5px;
position: relative;
}
.track .handle {
width: 20px;
height: 10px;
background-color: green;
cursor: move;
position: absolute;
top: -2px;
}
.pad {
padding: 25px 15px;
}
</
style
>
</
head
>
<
body
>
<
p
>
<
h1
style
=
"color: green;"
>
GeeksforGeeks
</
h1
>
<
h2
>Sliders onSlide Option</
h2
>
<
p
>
The onSlide callback function
gets invoked whenever the slider
is dragged.
</
p
>
<
div
class
=
"pad"
>
<
div
id
=
"track-hor"
class
=
"track"
>
<
div
id
=
"handle-hor"
class
=
"handle"
>
</
div
>
</
div
>
</
div
>
<
p
>Current Slider Value:
<
span
id
=
"out"
>0</
span
>
</
p
>
<
div
class
=
"pad"
>
<
div
id
=
"track-hor2"
class
=
"track"
>
<
div
id
=
"handle-hor2"
class
=
"handle"
>
</
div
>
</
div
>
</
div
>
<
p
>Current Slider 2 Value:
<
span
id
=
"out2"
>0</
span
>
</
p
>
<
script
type
=
"text/javascript"
>
// Initialize the slider
let slider = new Control.Slider('handle-hor',
'track-hor', {
// Define the range
range: $R(1, 100),
// Define the callback function to be
// invoked when the slider is being
// dragged
onSlide: function (currValue) {
document.querySelector("#out")
.textContent = currValue;
}
});
// Initialize the slider
let slider2 = new Control.Slider('handle-hor2',
'track-hor2', {
// Define the range
range: $R(1, 100),
values: [1, 5, 10, 50, 80, 100],
// Define the callback function to be
// invoked when the slider is being
// dragged
onSlide: function (currValue) {
document.querySelector("#out2")
.textContent = currValue;
}
});
</
script
>
</
body
>
</
html
>