Javascript 显示输入范围滑块的值

我有一个简单的输入滑块，我想在它下面显示滑块当前的值

我原以为我可以使用下面的脚本，但它破坏了页面上使用Javascript的所有其他内容

$(document).ready(function(){
    var slider = document.getElementById("deposit-input");
    var output = document.getElementById("deposit-value");
    output.innerHTML = slider.value;

    slider.oninput = function() {
      output.innerHTML = this.value;
    }
});

这有什么问题，或者是否有更好/更简单的方式在页面上显示值

提前谢谢

/*==========================================================================
#航行
========================================================================== */
/* 
*创建类以启用响应导航。
*/
//等待DOM准备就绪（无论
//加载或未加载）。
$（函数（）{
//使用“toggle nav”类将单击事件绑定到任何对象。
$（'.page-head\u-toggle'）。单击（函数（）{
if（$（'body'）.hasClass（'show-nav'））{
$（'body'）.removeClass（'show-nav'）.addClass（'hide-nav'）；
setTimeout（函数（）{
$（'body'）.removeClass（'hide-nav'）；
}, 800);
}否则{
$（'body'）.removeClass（'hide-nav'）.addClass（'show-nav'）；
}
//取消激活单击时转到下一页的默认行为。
返回false；
});
});
/* 
*滑线。
*/
$（函数（）{
var$el，
leftPos，
新宽度，
$mainNav=$（“.site-nav_uu列表”）；
$mainNav.追加（“”）；
变量$magicLine=$（“.site-nav__线”），
$currentMenu=$（“.current菜单项”）；
$magicLine
.width（$currentMenu.length？$currentMenu.width（）：0）
.css（“左”，$currentMenu.length？$currentMenu.find（“a”）.position（）。左：0）
.data（“origLeft”，$magicLine.position（）.左）
.data（“origWidth”，$magicLine.width（））；
var悬停；
$（“.site-nav\u list li a”）.hover（函数（）{
清除超时（悬停）；
$el=$（此项）；
leftPos=$el.position（）.left；
newWidth=$el.parent（）.width（）；
如果（！$magicLine.width（））{
$magicLine.stop（）.hide（）.css({
左：左位置，
宽度：新宽度
}).fadeIn（100）；
}否则{
$magicLine.stop（）.animate({
不透明度：1，
左：左位置，
宽度：新宽度
});
}
},
函数（）{
hoverOut=setTimeout（函数（）{
如果（！$currentMenu.length）{
$magicLine.fadeOut（100，函数（）{
$magicLine.css({
左：$magicLine.data（“origLeft”），
宽度：$magicLine.data（“origWidth”）
});
});
}否则{
$magicLine.stop（）.animate({
左：$magicLine.data（“origLeft”），
宽度：$magicLine.data（“origWidth”）
});
}
}, 100);
}
);
});
/* ==========================================================================
#简易手风琴
========================================================================== */
$（'.accordion'）。查找（'.accordion\u title'）。单击（函数（）{
$（this.toggleClass（'open'）；
$（this.next（）.slideToggle（'fast'）；
});
/* ==========================================================================
#输入滑块
========================================================================== */
/* 
*简单版本。这段代码只使用了``元素和
*显示页面上的值。
*/
$（文档）.ready（函数（）{
var slider=document.getElementById（“存款输入”）；
var输出=document.getElementById（“存款价值”）；
output.innerHTML=slider.value；
slider.oninput=函数（）{
output.innerHTML=this.value；
}
});
/* ==========================================================================
#光滑的
========================================================================== */
/* 
*创建类以启用响应导航。
*/
$（文档）.ready（函数（）{
$（'.slick slider'）。slick({
自适应高度：正确，
箭头：错，
点：是的，
无限：错，
是的，
cssEase:“放松”，
航速：300
});
});
/* 
*创建类以启用响应导航。
*/
$（文档）.ready（函数（）{
$（'slick carousel'）。slick({
centerMode：对，
中心填充：“0”，
幻灯片放映：3，
箭头：错，
点：是的，
响应：[
{
断点：960，
设置：{
centerMode：对，
中心填充：“120px”，
幻灯片放映：1
}
},
{
断点：600，
设置：{
centerMode：对，
中心填充：“60px”，
幻灯片放映：1
}
},
{
断点：480，
设置：{
centerMode：对，
中心填充：“30px”，
幻灯片放映：1
}
}
]
});
});
/* 
*幻灯片格式（适用于应用页面）
*/
$（文档）.ready（函数（）{
$（'.slick form'）。slick({
自适应高度：正确，
箭头：是的，
附录箭头：$（'.slick form arrows'），
如箭头所示：“返回”，
下一行：“下一张幻灯片”，
点：错，
无限：错
});
});

滑块（浏览器）*
金额：

也许您应该尝试重新添加一些“损坏”的代码。你的代码片段正在运行，我们猜不出你代码的其他部分出了什么问题。添加了整个JS文件。我想整个页面的html可能有点过时了！该代码段现在抛出错误。：）啊，好的，我在浏览器控制台中看不到任何东西。你知道这是什么吗？根据你的html，错误从这里开始：$mainNav=$（“.site-nav\uu list”）