Clique no controle acima e arraste. Um número vai aparecer dentro da área de input.
<html>
<head>
<title>Controle Deslizante</title>
<link rel="stylesheet" type="text/css" href="/css/ui-lightness/jquery-ui-1.10.4.custom.css"/>
<script type= "text/javascript" src= "/static/js/jquery.min.js"> </script>
<script type= "text/javascript" src= "/static/js/jquery-ui.min.js"> </script>
<script type= "text/javascript">
<style>
#slider{margin: 50px;}
</style>
<script type= "text/javascript">
$(function(){
$("#slider").slider({
min: 10,
max: 100,
value: 60,
orientation: "vertical",
slide: function(event, ui) {
$("#valor").val(ui.value)
}
});
});
</script>
</head>
<body>
No Html:
<div id="slider"></div>
Valor:<input type="text" id="valor" />
Na biblioteca jQuery UI, na parte de Widgets Slider estão disponíveis maiores informações.