Javascript 将滑块值序列化为不可编辑的文本对象
我正在尝试构建一个范围滑块，将其值序列化为不可编辑的文本元素，如上图中所示的滑块 我正在使用noUiSlider jquery插件 我成功地构建了一个滑块，将代码序列化到输入字段。我的问题是如何将输入字段中的值转换为不可编辑的文本对象，如padmapper示例中所示 以下两种解决方案都只是将滑块值冻结在其起始值，而不是根据滑块的移动进行动态调整- 下面的代码-抱歉，没有JFiddle-找不到noUiSlider JS和CSS的URI：Javascript 将滑块值序列化为不可编辑的文本对象,javascript,jquery,html,css,serialization,Javascript,Jquery,Html,Css,Serialization,我正在尝试构建一个范围滑块，将其值序列化为不可编辑的文本元素，如上图中所示的滑块 我正在使用noUiSlider jquery插件 我成功地构建了一个滑块，将代码序列化到输入字段。我的问题是如何将输入字段中的值转换为不可编辑的文本对象，如padmapper示例中所示 以下两种解决方案都只是将滑块值冻结在其起始值，而不是根据滑块的移动进行动态调整- 下面的代码-抱歉，没有JFiddle-找不到noUiSlider JS和CSS的URI： <html> <form id="f
<html>
<form id="form">
<div id="slider"></div>
<table>
<tr>
<td> <input class="simpleCart_input" type="text" name="min-euro" id="min-euro"></td>
<td> <input class="simpleCart_input" id="max-euro" type="text"></td>
</tr>
</table>
</form>
<js>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.nouislider.js" type="text/javascript"></script>
<script type="text/javascript">
var slider = $('#slider'),
form = $('#form');
slider.noUiSlider({
range: [0,8000]
,start: [1000,7000]
,connect: true
,serialization: {
resolution: 0.1,
to: [
[ $('#min-euro')],
[ $('#max-euro')]
]
}
});
</script>
<css>
#slider {
width: 300px;
margin: 30px auto;
}
form {
border: 1px solid #ccc;
width: 500px;
margin: 0 auto 30px;
}
table {
font-family: Arial;
table-layout: fixed;
width: 500px;
margin: 0 auto;
text-align: center;
}
td {
width: 50%;
padding: 10px;
}
input, select {
padding: 5px;
}
<!-- noUiSlider css code too long to insert -->
变量滑块=$（“#滑块”），
形式=$（“#形式”）；
滑杆({
范围：[08000]
，开始：[10007000]
，connect:true
，序列化：{
决议：0.1，
致：[
[$（'最低欧元'）]，
[$（'最高欧元'）]
]
}
});
#滑块{
宽度：300px；
保证金：30像素自动；
}
形式{
边框：1px实心#ccc；
宽度：500px；
保证金：0自动30px；
}
桌子{
字体系列：Arial；
表布局：固定；
宽度：500px；
保证金：0自动；
文本对齐：居中；
}
运输署{
宽度：50%；
填充：10px；
}
输入，选择{
填充物：5px；
}
<html>
<form id="form">
<div id="slider"></div>
<table>
<tr>
<td> <span id="min-euro"></span></td>
<td> <span id="max-euro"></span> <td>
</tr>
</table>
</form>
<script type="text/javascript">
var slider = $('#slider'),
form = $('#form');
slider.noUiSlider({
range: [0,8000]
,start: [1000,7000]
,step: 10
,connect: true
,serialization: {
to: [
[ $('#min-euro'), 'html'],
[ $('#max-euro'), 'html']
]
}
});
</script>
变量滑块=$（“#滑块”），
形式=$（“#形式”）；
滑杆({
范围：[08000]
，开始：[10007000]
，步骤：10
，connect:true
，序列化：{
致：[
[$（'mineuro'），'html']，
[$（'max euro'），'html']
]
}
});
disabled=“disabled”