<!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: 200px;
background-color: gray;
height: 5px;
position: relative;
}
.track .handle {
width: 20px;
height: 10px;
background-color: green;
cursor: move;
position: absolute;
top: -2px;
}
.pad {
padding: 25px;
}
</
style
>
</
head
>
<
body
>
<
p
>
<
h1
style
=
"color: green;"
>
GeeksforGeeks
</
h1
>
<
h2
>Sliders range</
h2
>
<
p
>
The "range" option can be used to
set the range of the slider.
</
p
>
<
div
class
=
"pad"
>
<
div
id
=
"track-hor"
class
=
"track"
>
<
div
id
=
"handle-hor"
class
=
"handle"
>
</
div
>
</
div
>
</
div
>
<
p
>Current Slider1 Value:
<
span
id
=
"out1"
></
span
>
</
p
>
<
div
class
=
"pad"
>
<
div
id
=
"track2-hor"
class
=
"track"
>
<
div
id
=
"handle2-hor"
class
=
"handle"
>
</
div
>
</
div
>
</
div
>
<
p
>Current Slider2 Value:
<
span
id
=
"out2"
></
span
>
</
p
>
<
script
type
=
"text/javascript"
>
new Control.Slider('handle-hor',
'track-hor', {
// Setting the range of the slider
// from 0 to 100
range: $R(0, 100),
sliderValue: 50,
onSlide: (val) => {
document.querySelector("#out1")
.textContent = val;
}
});
new Control.Slider('handle2-hor',
'track2-hor', {
// Setting the range of the slider
// from 20 to 50
range: $R(20, 50),
sliderValue: 30,
onSlide: (val) => {
document.querySelector("#out2")
.textContent = val;
}
});
</
script
>
</
body
>
</
html
>