jquery ui slider example 1

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>20140612-2.html</title>
<link rel="stylesheet" href="./js/jquery-ui-1.10.4/css/start/jquery-ui.css">
<script src="./js/jquery-ui-1.10.4/js/jquery-1.10.2.js"></script>
<script src="./js/jquery-ui-1.10.4/js/jquery-ui-1.10.4.js"></script>
<style>
    #slider {width:300px;margin-bottom:20px;}
    #photo {width:300px;}
</style>
</head>
<body>
<div id="slider"></div>
<img id="photo" src="http://lorempixel.com/300/300">
<script>
    $("#slider").slider({
        max:300,
        slide: changeSlider,
  change: changeSlider,
        value:300
    });
    function changeSlider(){
        var w = $("#slider").slider("value");
        $("#photo").css("width",w + "px");
    }
</script>
</body>
</html>