JQuery UI滑块，仅加载Button而不加载Range并且滑块不滑动答案

【问题标题】：JQuery UI slider, only the Button loads and not the Range and the slider does not slideJQuery UI滑块，仅加载Button而不加载Range并且滑块不滑动
【发布时间】：2021-11-02 23:02:18
【问题描述】：

我正在使用 jquery 滑块，我面临的问题是只显示滑块按钮而不是范围。当我尝试滑动按钮时，它不会滑动。

HTML

<div id="slider-range"></div>

$("#slider-range").slider({
  range: true,
  min: 0,
  max: 500,
  values: [75, 300],
  slide: function (event, ui) {
    console.log("sliding");
  }
});

这就是 UI 出现的方式

注意事项：

我确认 div 在执行 JS 之前已经加载完毕，并且控制台中没有异常。
为了确认 JQuery UI JS 和 CSS 的加载，我在同一个 Div 中渲染了一个不同的控件（Calendar Control），它加载并正常工作。
我实现了滑块回调以确认控件从 JQueryUI 工作，并且滑块回调正常工作。我可以看到我在回调中放入的控制台日志。
我通过控制台中的 Elements 选项卡确认 Div 已附加 JQueryUI 类
我观察到滑块按钮添加了一个 href 属性，它指向 localhost。
我还确认通过控制台我可以看到滑块按钮上应用的 jquery-UI 样式

如果有人能帮助我解决这个问题，那将非常有帮助。

【问题讨论】：

您是否将呼叫包装在 document.ready 中？即使您建议没有操作顺序问题，也可能会有所帮助
欢迎来到 Stack Overflow。这些图像表明您没有包含 jQuery 的 CSS。请提供一个最小的、可重现的示例：stackoverflow.com/help/minimal-reproducible-example
你没有必要的依赖.....
@nikhilsugandh：如果您能建议缺少的依赖项，这将非常有帮助
@Ctznkane525：我没有将它包装在 document.ready 中，但我在添加 JS 控件的代码和文档可用之前通过控制台确认了相同的内容，甚至是我添加的 div也可以进行控制。此外，通过检查元素，我确认 div 已附加控件的元素

标签： javascript html jquery css jquery-ui

【解决方案1】：

使用这个：

https://jsfiddle.net/6sxg9ytd/1/

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Slider - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#slider" ).slider(
    {
    range: true,
    min: 0,
    max: 500,
    values: [ 55, 105 ],
    slide: function( event, ui ) {
    console.log("sliding");
    }
    });
  } );
  </script>
</head>
<body>
 
<div id="slider"></div>
 
 
</body>
</html>

【讨论】：

这段代码类似于 jqueryui.com 上的代码。我已经尝试过了，但它不起作用。另外，您能否解释一下 demo/style.css 的用途以及它如何为您工作。据我了解，这是 jquiryui 页面所需的。由于您使用的是不同的环境，它是否解决了任何目的
@RishabhNigam 检查小提琴jsfiddle.net/6sxg9ytd/1 它的工作原理......你可以用绿色勾号来回答......
@RishabhNigam 你可以给它一个绿色勾号。检查答案中的小提琴链接