Slider Rango Minimo y Maximo
Publicado por Unexes (7 intervenciones) el 12/01/2013 22:28:46
Hola a tod@s:
Tengo este slider que funciona bien, mi problema es que no se obtener para despues hacer una consulta los valores minimo y máximo actuales que ha seleccionado el usuario, he mirado la documentacion pero no se como hacerlo
Me podeis ayudar, ya que es la primera vez que toco el jquery.ui
Tengo este slider que funciona bien, mi problema es que no se obtener para despues hacer una consulta los valores minimo y máximo actuales que ha seleccionado el usuario, he mirado la documentacion pero no se como hacerlo
Me podeis ayudar, ya que es la primera vez que toco el jquery.ui
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Range slider</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.3.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.slider.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#slider-precio" ).slider({
range: true,
min: 0,
max: 600,
values: [ 20, 150 ],
slide: function( event, ui ) {
$("#precio" ).val( ui.values[ 0 ] + "€" + " - " + ui.values[ 1 ]+ "€" );
$("#inputprecio_min").attr('value', ui.values[ 0 ]);
$("#inputprecio_max").attr('value', ui.values[ 1 ]);
}});
$( "#precio" ).val( $( "#slider-precio" ).slider( "values", 0 ) +
"€ -" + $( "#slider-precio" ).slider( "values", 1 ) + "€" );
$("#inputprecio_min").attr('value', $( "#slider-precio" ).slider( "values", 0 ));
$("#inputprecio_max").attr('value', $( "#slider-precio" ).slider( "values", 1 ));
});
</script>
</head>
<body>
<p>
<label for="precio">Rango de precios:</label>
<input type="text" id="precio" style="border:0; color:#f6931f; font-weight:bold;" />
</p>
<div id="slider-precio"></div>
</body>
</html>
Valora esta pregunta
0