Estuve mirando varios tutoriales y esto es lo más cercano que llegué a hacer, pero aun así no funciona.
slider.js
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 18,
max: 65,
values: [ 18, 25 ],
slide: function( event, ui ) {
$( "#amount" ).val( "" + ui.values[ 0 ] + " - " + ui.values[ 1 ] );
}
});
$( "#amount" ).val($( "#slider-range" ).slider( "values", 0 ) +
" - " + $( "#slider-range" ).slider( "values", 1 ) );
})(jQuery);
jQuery.noConflict();
$(function() {
$( "#tarifa" ).slider({
range: true,
min: 20,
max: 600,
values: [ 20, 80 ],
slide: function( event, ui ) {
$( "#cantidad" ).val(ui.values[ 0 ] + " - " + ui.values[ 1 ] + " € " );
}
});
$( "#cantidad" ).val($( "#tarifa" ).slider( "values", 0 ) +
" - " + $( "#tarifa").slider("values", 1 ) + " € ");
})(jQuery);
jQuery.noConflict();
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="inc/jquery.ui.all.css">
<script src="./inc/jquery-1.7.1.js"></script>
<script>jQuery.noConflict();</script>
<script src="./inc/jquery.ui.core.js"></script>
<script src="./inc/jquery.ui.widget.js"></script>
<script src="./inc/jquery.ui.mouse.js"></script>
<script src="./inc/jquery.ui.slider.js"></script>
<script src="./inc/slider_form.js"></script>
<!-- lightbox -->
<script type="text/javascript" src="./inc/lightbox/javascript/jquery.min.js"></script>
<script>jQuery.noConflict();</script>
<link rel="stylesheet" type="text/css" href="./inc/lightbox/javascript/lightbox/themes/default/jquery.lightbox.css" />
<script type="text/javascript" src="./inc/lightbox/javascript/lightbox/jquery.lightbox.min.js"></script>
<!-- fin -->
</head>
<body><a href="contacto.php?lightbox[iframe]=true&lightbox[width]=700&lightbox[height]=700" class="lightbox">ABRIR</a>
<div class="demo"><!-- SLIDER EDAD -->
<p>
<label for="amount">Edad:</label>
<input type="text" name="edad" id="amount" style="border:0; color:#f6931f; font-weight:bold; " />
</p>
<div id="slider-range" style="width:150px;margin-left:10px;"></div>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.lightbox').lightbox();
});
</script>
</body>
</html>
¿Algún consejo?
Gracias