I've changed my markup to: <div id="ariaslider"> <form action="#"> <!-- Slider --> <fieldset> <select name="sizer" id="speed"> <option value="10">10</option> <option value="20">20</option> <option value="21" selected="selected">21</option> <option value="30">30</option> <option value="40">40</option> </select> </fieldset> </form> </div>
and code to: <script type="text/javascript"> $(function(){ //demo 1 var abc = $('select#sizer').selectToUISlider().next(); var setfontsize = $('#sizer :selected').text(); $('#ariaslider').slider({change: function(event, ui) { $('.cica').css("font-size", setfontsize + "px");} }); $('#ariaslider').bind('slidechange', function(event, ui) { $('.cica').css("font-size", setfontsize + "px"); }); }); </script> I am not quite sure of what it does, I am trying to get more info on how bind works... It now change the first size and then it blocks. Thank you for your help.