Please refer below code.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Slider</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css"
type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
$('#slider').slider({ min: 0, max: 1, step: 0.1, value: 1 })
.bind("slidechange", function () {
var o = $(this).slider('value');
var e = '#' + $(this).attr('data-wjs-element');
$(e).css('opacity', o)
});
});
</script>
<style type="text/css">
#box
{
width: 200px;
height: 100px;
background-color: #ff0000;
}
#slider
{
width: 200px;
}
</style>
</head>
<body>
<div id="slider" data-wjs-element="box">
</div>
<br />
<img id="box" src="http://www.aspforums.net/Avatars/Shashikant.jpg?635862636668500000"
alt="Alternate Text" />
</body>
</html>
Demo
I hope this will help you out.
