设置jquery移动滑块会导致错误

我试图在jQuery mobile 1.4.5和JQ 2.1.4中设置滑块的值，但确实出现以下错误：

错误：滑块小部件实例没有此类方法“值”

HTML代码：

<div data-role="rangeslider" id="filter_price" style="touch-action: none;">
    <input type="range" name="price_from" id="price_from" min="0" max="30000" step="250"  data-popup-enabled="true">
    <input type="range" name="price_to" id="price_to" min="0" max="30000" step="250"  data-popup-enabled="true">
</div>

---

这看起来和几年前完全一样，但可能已经过时了，因为它已经8年了。

这里有几个问题。首先，在正在实例化滑块的

div

中创建了一些

range

输入。这只会导致问题，因为它们会干扰滑块布局。我建议把它们去掉

其次，使用两个参数调用

值

，目的是与范围滑块一起使用，而不是与单个值滑块一起使用。从DOM中的两个范围输入中，我假设您正在尝试将其作为范围选择。因此，在创建滑块时，需要在滑块上设置

range:true

。然后您可以按当前状态调用

值。试试这个：


$（'filter#u price'）。滑块({
范围：对，
分:0,，
最高：150
});
$（'filter_price'）。滑块（'values'，0,50）；
$（'filter_price'）。滑块（'values'，1100）
这里有几个问题。首先，在正在实例化滑块的
div
中创建了一些
range
输入。这只会导致问题，因为它们会干扰滑块布局。我建议把它们去掉

其次，使用两个参数调用
值
，目的是与范围滑块一起使用，而不是与单个值滑块一起使用。从DOM中的两个范围输入中，我假设您正在尝试将其作为范围选择。因此，在创建滑块时，需要在滑块上设置
range:true
。然后您可以按当前状态调用
值。试试这个：


$（'filter#u price'）。滑块({
范围：对，
分:0,，
最高：150
});
$（'filter_price'）。滑块（'values'，0,50）；
$（'filter_price'）。滑块（'values'，1100）
我来参加聚会有点晚了，但以下是jQuery Mobile 1.4.5
RangeSloider
（不是jQuery UI）的解决方案

由于JQM
RangeSlaider
有效地构建在两个JQM滑块之上，因此您可以通过编程在这两个
创建
事件中设置
min
和
max
值：


var范围={
“低”：{最小值：1，最大值：10000}，
“中等”：{最小值：10000，最大值：20000}，
“高”：{最低：20000，最高：30000}
};
$（文档）.on（“slidecreate”，“#price_from”，函数（e）{
$（this.val）（范围[“medium”].min）；
});
$（文档）.on（“slidecreate”，“#price_to”，函数（e）{
$（此）.val（范围[“中”].max）；
});
$（文档）.on（“rangeslidercreate”，“过滤器价格”，函数（e）{
//已创建RangeSloider
});
$（文档）.on（“更改”，“输入：radio[name='price-range']”，function（）{
$（“#price_from”）.val（范围[this.value].min）；
$（“#price_to”）.val（范围[this.value].max）；
$（“过滤价格”）.RangeSlaider（“刷新”）；
});
.ui滑块弹出窗口{
宽度：自动！重要；
填充：14px 8px 0！重要；
}
.ui-grid-a.ui-block-a，
.ui-grid-a.ui-block-b{
文本对齐：居中；
}

标题


低
中等
高
我来参加聚会有点晚了，但以下是jQuery Mobile 1.4.5
RangeSloider
（不是jQuery UI）的解决方案

由于JQM
RangeSlaider
有效地构建在两个JQM滑块之上，因此您可以通过编程在这两个
创建
事件中设置
min
和
max
值：


var范围={
“低”：{最小值：1，最大值：10000}，
“中等”：{最小值：10000，最大值：20000}，
“高”：{最低：20000，最高：30000}
};
$（文档）.on（“slidecreate”，“#price_from”，函数（e）{
$（this.val）（范围[“medium”].min）；
});
$（文档）.on（“slidecreate”，“#price_to”，函数（e）{
$（此）.val（范围[“中”].max）；
});
$（文档）.on（“rangeslidercreate”，“过滤器价格”，函数（e）{
//已创建RangeSloider
});
$（文档）.on（“更改”，“输入：radio[name='price-range']”，function（）{
$（“#price_from”）.val（范围[this.value].min）；
$（“#price_to”）.val（范围[this.value].max）；
$（“过滤价格”）.RangeSlaider（“刷新”）；
});
.ui滑块弹出窗口{
宽度：自动！重要；
填充：14px 8px 0！重要；
}
.ui-grid-a.ui-block-a，
.ui-grid-a.ui-block-b{
文本对齐：居中；
}

标题


低
中等
高
虽然公认的答案是针对您的问题，但您的问题显然是关于。请注意，这是两个不同的库，具有不同的
RangeSloider
实现。虽然公认的答案是针对您的问题，但显然是关于。请注意，这两个库具有不同的
RangeSloider
实现。
   $('#filter_price').slider();
   $('#filter_price').slider('values', 0,  50);  
   $('#filter_price').slider('values', 1,  100);