<!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 onChange Option</
h2
>
<
p
>
The onChange callback function
gets invoked whenever the value
changes. The value of the slider
can be set using the setValue method.
</
p
>
<
div
class
=
"pad"
>
<
div
id
=
"track-hor"
class
=
"track"
>
<
div
id
=
"handle-hor"
class
=
"handle"
>
</
div
>
</
div
>
</
div
>
<
input
type
=
"text"
id
=
"val"
>
<
button
onclick
=
"setVal()"
>
Set Value
</
button
>
<
p
>Current Slider Value:
<
span
id
=
"out"
>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),
onChange: function (currValue) {
document.querySelector("#out")
.textContent = currValue;
}
});
function setVal() {
// Get the value form the input box
let val =
document.querySelector("#val")
.value;
// Set the value of the slider
// to the given value
slider.setValue(val);
}
</
script
>
</
body
>
</
html
>