0
216
ViewsEstoy usando un control deslizante, pero cuando lo codifico. la información sobre herramientas no se mueve y el desplazamiento tampoco funciona
Estoy usando este sitio web https://www.jqueryscript.net/demo/Highly-Customizable-Range-Slider-Plugin-For-Bootstrap-Bootstrap-Slider/ para el control deslizante y estoy usando el control deslizante de marcas de graduación personalizadas, pero la información sobre herramientas no es trabajando, no puedo entender qué salió mal con la información sobre herramientas. He copiado bootstrap-slider.css de dist folder css y bootstrap-slider.js de dist pero aún así la información sobre herramientas no funciona
//html code <html lang="en"> <head> <title>Comment</title> <meta charset="utf-8"> <meta content="utf-8" http-equiv="encoding"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> --> <link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" type="text/css" href="css/style.css"> <link href="css/bootstrap-slider.css" rel="stylesheet"> <!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> --> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="js/bootstrap-slider.js"></script> </head> <body> <div class="ranges"> <input id="test" type="text" data-slider-ticks="[0, 100, 200, 300, 400]" data-slider-ticks-snap-bounds="30" data-slider-ticks-labels='["$0", "$100", "$200", "$300", "$400"]'/> </div> <!-- <script src="js/script.js"></script> --> <script> $("#test").slider({ ticks: [0, 100, 200, 300, 400], ticks_labels: ['$0', '$100', '$200', '$300', '$400'], ticks_snap_bounds: 30 }); </script> </body> </html>2 answers
Answer question0
Intenta reemplazar esto:
a esto:
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/bootstrap-slider.min.js" integrity="sha512-f0VlzJbcEB6KiW8ZVtL+5HWPDyW1+nJEjguZ5IVnSQkvZbwBt2RfCBY0CBO1PsMAqxxrG4Di6TfsCPP3ZRwKpA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/css/bootstrap-slider.min.css" integrity="sha512-3q8fi8M0VS+X/3n64Ndpp6Bit7oXSiyCnzmlx6IDBLGlY5euFySyJ46RUlqIVs0DPCGOypqP8IRk/EyPvU28mQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />Si funciona, significa que el problema es la ruta del archivo.
0
la versión del control deslizante del sitio de demostración es 6.0.4 y está desactualizada
la versión reciente es 11 y solo admite bootstrap 4
más información: https://github.com/seiyria/bootstrap-slider