为什么JQuery UI滑块组件无法在我的HTML页面上正常显示？

• 资源路径校验
  你当前使用绝对路径引入jQuery、jQuery UI的脚本和样式文件，若HTML文件与jquery-ui-1.12.1.custom文件夹的相对位置不匹配，会出现资源加载404，导致功能完全失效。你可以将引入路径的前缀/删除，使用相对路径引入：

  <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>
  

• 冗余HTML标签清理
  你的代码末尾存在多余的</section>闭合标签，没有对应的起始标签，删除该冗余标签即可避免潜在的渲染异常。
• 控制台报错排查
  按下F12打开浏览器开发者工具，切换到「控制台」标签页，查看是否存在资源加载失败、$ is not defined类的报错，可直接定位问题根源。
• 临时样式测试
  若确认脚本加载正常但滑块无显示，可在样式中添加临时规则确认是否是样式加载异常：

  #slider-range {
    height: 8px;
    margin: 20px 10px;
    background: #eee;
  }
  

内容的提问来源于stack exchange，提问作者user16732475