next and previous buttons to the Jquery UI slider

next and previous buttons to the Jquery UI slider


Hello everybody on this list. This is my first post here. I am new to
Jquery and have during the last days been trying to get an
understanding for how everything works, but it is still some concepts
I do not get.
In the code below I have successfully been able to add next and
previous buttons to the Jquery UI slider. The problem is that I'm not
able to get the new values back.
In other words I can click the Next button ones and it works but
nothing happens if I click a second time.
    $(function() {
        $("#slider").slider({
            range: "min",
            min: 1,
            max: 10,
            value: 1,
            slide: function(event, ui) {
         //next button
             $("li.next").click(function(){
         $("#slider").slider( 'value' , [((ui.value) + 1)] )
         });
         //previous button
         $("li.previous").click(function(){
             $("#slider").slider( 'value' , [((ui.value) - 1)] )
              });
            }
        });
    });
    </script>
</head>
<body>
<ul id="nav">
    <li class="next"><a href="#">next</a></li>
    <li class="previous"><a href="#">previous</a></li>
</ul>
<div id="slider"></div>
</body>