如何获取不依赖jQuery的Ion RangeSlider组件？

算力阿峰

2026-10-11

无jQuery依赖的Ion RangeSlider相关解决方案

原生Ion RangeSlider官方版本默认依赖jQuery，你可以根据需求选择以下两种方案解决问题：

方案1：规避jQuery冲突（无需替换滑块组件，改造成本最低）

你遇到的jQuery和专属菜单冲突问题，不需要完全移除jQuery，使用jQuery.noConflict()方法释放$标识符的控制权即可，不会影响原有菜单的逻辑，同时可以正常调用Ion RangeSlider，示例代码如下：

<!-- 引入jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
// 释放$的控制权，自定义关键字调用jQuery
const jq = jQuery.noConflict();
// 初始化滑块时用自定义的jq关键字代替$即可
jq("#你的滑块ID").ionRangeSlider({
  // 你原有的滑块配置参数
});
</script>

方案2：完全移除jQuery，使用纯JS实现的滑块组件

如果确实需要完全移除jQuery依赖，可以替换为原生JS实现的同功能滑块组件，功能和UI都可以做到和原Ion RangeSlider完全一致。
如果之前接入纯JS滑块失败，大多是两个原因：

初始化代码执行时机早于DOM加载完成，需要把初始化逻辑放在DOM加载完成的回调中执行
原Ion RangeSlider的配置项没有对应迁移到新组件的配置中

纯JS滑块基础初始化示例：

// 等待DOM加载完成
document.addEventListener('DOMContentLoaded', function() {
  const sliderEl = document.querySelector('#你的滑块ID');
  // 初始化滑块
  rangeSlider.create(sliderEl, {
    min: 0,
    max: 100,
    step: 1,
    value: 50
    // 其他自定义配置
  });
});