Ver Mensaje Individual
  #1 (permalink)  
Antiguo 12/01/2013, 15:11
unexes
 
Fecha de Ingreso: enero-2011
Ubicación: España
Mensajes: 222
Antigüedad: 13 años, 3 meses
Puntos: 7
Slider Rango Minimo y Maximo

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

Código HTML:
Ver original
  1. <!doctype html>
  2. <html lang="en">
  3.     <meta charset="utf-8">
  4.     <title>jQuery UI Slider - Range slider</title>
  5.     <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
  6.     <script src="../../jquery-1.8.3.js"></script>
  7.     <script src="../../ui/jquery.ui.core.js"></script>
  8.     <script src="../../ui/jquery.ui.widget.js"></script>
  9.     <script src="../../ui/jquery.ui.mouse.js"></script>
  10.     <script src="../../ui/jquery.ui.slider.js"></script>
  11.     <link rel="stylesheet" href="../demos.css">
  12.     <script>
  13.     $(function() {
  14.         $( "#slider-precio" ).slider({
  15.             range: true,
  16.             min: 0,
  17.             max: 600,
  18.             values: [ 20, 150 ],
  19.             slide: function( event, ui ) {
  20.                 $("#precio" ).val( ui.values[ 0 ] + "€" + " - " + ui.values[ 1 ]+ "€" );
  21.                 $("#inputprecio_min").attr('value', ui.values[ 0 ]);
  22.                 $("#inputprecio_max").attr('value', ui.values[ 1 ]);
  23.             }
  24.         });
  25.         $( "#precio" ).val( $( "#slider-precio" ).slider( "values", 0 ) +
  26.             "€ -" + $( "#slider-precio" ).slider( "values", 1 ) + "€" );
  27.  
  28.         $("#inputprecio_min").attr('value', $( "#slider-precio" ).slider( "values", 0 ));
  29.         $("#inputprecio_max").attr('value', $( "#slider-precio" ).slider( "values", 1 ));
  30.  
  31.     });
  32.     </script>
  33. </head>
  34.  
  35. <p>
  36.  
  37.     <label for="precio">Rango de precios:</label>
  38.     <input type="text" id="precio" style="border:0; color:#f6931f; font-weight:bold;" />
  39. </p>
  40.  
  41. <div id="slider-precio"></div>
  42.  
  43. </body>
  44. </html>
__________________
¿Hay algo mas hermoso que ayudar.?