Estoy tratando de hacer que JQuery UI funcione en mi página HTML sin éxito. Específicamente, quiero usar el control deslizante de rango, pero no puedo mostrar nada en la página. Descargué la carpeta JQuery UI y la importé a mi archivo de código. El código tal como lo tengo en este momento es el siguiente:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="/styles.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" /> <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="/jquery-ui-1.12.1.custom/jquery-ui.min.css"> <script src="/jquery-ui-1.12.1.custom/external/jquery/jquery.js"></script> <script src="/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script> <script> $( function() { $( "#slider-range" ).slider({ range: true, min: 0, max: 500, values: [ 75, 300 ], slide: function( event, ui ) { $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] ); } }); $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) + " - $" + $( "#slider-range" ).slider( "values", 1 ) ); } ); </script> </head> <body> <section class = "nav-bar"></section> <p> <label for="amount">Price range:</label> <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;"> </p> <div id="slider-range"></div> </section>¡¡Apreciaría mucho la ayuda de alguien con esto!!
Los scripts jQuery personalizados causan problemas. Comenté el tuyo y agregué js predeterminado y css faltante. (es mejor mover las secuencias de comandos al pie de página)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="/styles.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" /> <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet"> <!-- my Styles start --> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <!-- my Styles end --> <link rel="stylesheet" href="/jquery-ui-1.12.1.custom/jquery-ui.min.css"> <!-- my jQuery start --> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <!-- my jQuery end --> <!-- my Script start --> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <!-- my Script end --> <!-- <script src="/jquery-ui-1.12.1.custom/external/jquery/jquery.js"></script> --> <!-- <script src="/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script> --> <script> $( function() { $( "#slider-range" ).slider({ range: true, min: 0, max: 500, values: [ 75, 300 ], slide: function( event, ui ) { $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] ); } }); $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) + " - $" + $( "#slider-range" ).slider( "values", 1 ) ); } ); </script> </head> <body> <section class = "nav-bar"></section> <p> <label for="amount">Price range:</label> <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;"> </p> <div id="slider-range"></div> </body>