HTML
<div id="slider"></div>
<br />
<div id="myDiv" style="font-size: 20px">
Slider Example
</div>
jQuery code
$(document).ready(function () {
var divElement = $('#myDiv');
$('#slider').slider({
min: 20,
max: 120,
orientation: 'horizontal',
slide: function (event, ui) {
divElement.css('font-size', ui.value + 'px');
}
});
});
For the complete list of slider options and events
http://api.jqueryui.com/slider
HTML
<div id="slider"></div>
<br />
<div id="divStart"></div>
<div id="divStop"></div>
<div id="divSlide"></div>
jQuery Code
$(document).ready(function () {
$('#slider').slider({
min: 20,
max: 120,
orientation: 'horizontal',
start: function (event, ui) {
$('#divStart').html('Start = ' + ui.value);
},
stop: function (event, ui) {
$('#divStop').html('Stop = ' + ui.value);
},
slide: function (event, ui) {
$('#divSlide').html('Slide = ' + ui.value);
}
});
});
Comments
Post a Comment