<!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 setDisabled</
h2
>
<
p
>
An enabled slider can be disabled
by using the setDisabled() method
as shown below.
</
p
>
<
div
class
=
"pad"
>
<
div
id
=
"track-hor"
class
=
"track"
>
<
div
id
=
"handle-hor"
class
=
"handle"
>
</
div
>
</
div
>
</
div
>
<
p
>Current Slider 1 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
>
<
button
onclick
=
"disableSlider()"
>
Disable Second Slider
</
button
>
<
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),
onSlide: (val) => {
document.querySelector("#out")
.textContent = val;
}
});
let slider2 = new Control.Slider('handle-hor2',
'track-hor2', {
// Define the range
range: $R(1, 100),
onSlide: (val) => {
document.querySelector("#out2")
.textContent = val;
}
});
function disableSlider() {
// Set the value of the slider
// to the given value
slider2.setDisabled();
}
</
script
>
</
body
>
</
html
>