<!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: 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
>
<
h1
style
=
"color: green;"
>
GeeksforGeeks
</
h1
>
<
h2
>Sliders disabled</
h2
>
<
p
>
The slider can be disabled or enabled
using the "disabled" option.
</
p
>
<
div
class
=
"pad"
>
<
div
id
=
"track-hor"
class
=
"track"
>
<
div
id
=
"handle-hor"
class
=
"handle"
>
</
div
>
</
div
>
</
div
>
<
div
class
=
"pad"
>
<
div
id
=
"track2-hor"
class
=
"track"
>
<
div
id
=
"handle2-hor"
class
=
"handle"
>
</
div
>
</
div
>
</
div
>
<
script
type
=
"text/javascript"
>
new Control.Slider('handle-hor',
'track-hor', {
range: $R(1, 10),
sliderValue: 5,
// This will disable the Slider
// and it will be locked
disabled: true
});
new Control.Slider('handle2-hor',
'track2-hor', {
range: $R(1, 10),
sliderValue: 5,
// This will enable the Slider
// to be used
disabled: false
});
</
script
>
</
body
>
</
html
>