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.