Javascript 如何向滑块添加加号/减号按钮

我正在寻找帮助，使+/-按钮-改变滑块值。我做错了什么？我想让它更有用。此时，用户只能通过滑动移动来更改值

片段：

功能过滤器价格（产品）{
设minP=$（“#价格”）.slider（“值”，0）；
设maxP=$（“#价格”）.slider（“值”，1）；
返回产品。过滤器（函数（）{
让value=parseInt（$（this）.data（“价格”），10）；
返回！（值>最大值| |值<最小值）；
});
}
功能过滤器检查盒（产品）{
复选框=$（“输入：选中”）.filter（函数（）{
返回$.inArray（$（this）.attr（“name”），['fl-1'，'fl-2'，'fl-3'，'fl-4'，'fl-5'，'fl-6'，'fl-7'，'fl-8']）！=-1；
}).map（函数（）{
返回此.value；
});
//如果未选中任何复选框，则不使用它们进行筛选
如果（复选框.length==0）{
退货产品；
}
返回产品。过滤器（函数（）{
categories=$（this.data（“category”）.toString（）.split（“”）；
让val=true；
复选框。每个（函数（）{
如果（！categories.includes（此[0]））{
val=假；
回来
}
});
返回val；
});
}
函数filterProducts（）{
//重置过滤器
产品=$（“#产品li”）；
产品。隐藏（）；
产品=过滤价格（产品）；
产品=过滤器检查盒（产品）；
products.show（）；
设numItems=products.length；
如果（numItems>0）{
label=“我们找到了”+numItems+“优惠。”；
}否则{
label=“无结果”；
}
$（“#找到”）.text（标签）；
}
$（函数（）{
让选项={
最小：500，
最高：100000，
步骤：500，
价值：[10000]，
幻灯片：功能（事件、用户界面）{
$（“#金额”）.val（ui.values[0]+“zł”）；
},
更改：功能（事件、用户界面）{
过滤产品（）；
}
};
$（“输入”）.filter（函数（）{
返回$.inArray（$（this）.attr（“name”），['fl-1'，'fl-2'，'fl-3'，'fl-4'，'fl-5'，'fl-6'，'fl-7'，'fl-8']）！=-1；
}).更换（过滤产品）；
美元（“#价格”）。滑块（选项）；
$（“金额”）.val（$（“价格”）.slider（“值”，0）+“z”）；
});
//以下功能不起作用
$（“#增加”）。单击（函数（）{
var sliderCurrentValue=$（“#价格”）。滑块（“期权”、“价值”）；
slider.slider（“值”，sliderCurrentValue+1）；
});
$（“#减少”）。单击（函数（）{
var sliderCurrentValue=$（“#价格”）。滑块（“期权”、“价值”）；
slider.slider（“值”，sliderCurrentValue-1）；
});
正文{
字体系列：“Arial”；
颜色：#6464；
}
.大陆包装{
浮动：左；
宽度：20%；
利润率：0.5%0.0；
填充：0；
}
塔贝拉女士{
浮动：左；
宽度：50%；
利润率：0.5%0.0；
填充：0；
位置：相对位置；
}
塔贝拉先生{
浮动：左；
宽度：50%；
}
塔贝拉分区{
浮动：左；
宽度：90%；
高度：68px；
线高：68px；
填充：0.5%；
背景：#eee；
利润率：0.01倍；
位置：相对位置；
}
.号码{
字体大小：12px；
}
.ui滑块{
位置：相对位置；
文本对齐：左对齐；
}
.ui滑块.ui滑块句柄{
位置：绝对位置；
z指数：2；
宽度：1.2米；
高度：1.2米；
游标：默认值；
}
.ui滑块.ui滑块范围{
位置：绝对位置；
z指数：1；
字体大小：.7em；
显示：块；
边界：0；
背景位置：0；
}
.ui滑块水平{
高度：.8em；
}
.ui滑块水平.ui滑块手柄{
顶部：-0.5em；
左边距：-.6em；
}
.ui滑块水平.ui滑块范围{
排名：0；
身高：100%；
}
.ui滑块水平。ui滑块最小范围{
左：0；
}
.ui滑块水平。ui滑块范围最大值{
右：0；
}
.ui滑块垂直{
宽度：.8em；
高度：100px；
}
.ui滑块垂直.ui滑块手柄{
左：-.3em；
左边距：0；
边缘底部：-.6em；
}
.ui滑块垂直.ui滑块范围{
左：0；
宽度：100%；
}
.ui滑块垂直。ui滑块最小范围{
底部：0；
}
.ui滑块垂直.ui滑块范围最大值{
排名：0；
}
.ui小部件内容{
边框：1px实心#AAAAA；
背景：白色50%50%repeat-x；
颜色：#22222；
}
.ui小部件{
字体系列：Verdana、Arial、无衬线字体；
字体大小：1.1米；
}
.ui状态默认值，
.ui小部件内容.ui状态默认值，
.ui小部件标题.ui状态默认值{
宽度：30px；
高度：30px；
边框：3px实心#2F3D44；
边界半径：20px；
背景：白色50%50%repeat-x；
字体大小：正常；
颜色：#555555；
}
.滑块1隐藏{
显示：无；
}

+增加
-减少
以下是我向您提出的建议：


添加了一个
mySlider
变量，以便可以使用该变量访问滑块（未定义按钮使用的变量
slider
）
为按钮添加了一个
类
，并带有一个自定义属性
步骤
，以便保持简单。删除HTML中的内联样式，并将其放入CSS中
使用
值
代替
值
无处不在，因为
值
只应在滑块获得多个值时使用
请注意，增加/减少值应与滑块的
步骤
要求相匹配

工作代码段：


var-mySlider；
功能过滤器价格（产品）{
设minP=$（“#价格”）.slider（“值”，0）；
设maxP=$（“#价格”）.slider（“值”，1）；
返回产品。过滤器（函数（）{
让value=parseInt（$（this）.data（“价格”），10）；
返回！（值>最大值| |值<最小值）；
});
}
功能过滤器检查盒（产品）{
复选框=$（“输入：选中”）.filter（函数（）{
返回$.inArray（$（this）.attr（“name”），['fl-1'，'fl-2'，'fl-3'，'fl-4'，'fl-5'，'fl-6'，'fl-7'，'fl-8']）！=-1；
}).map（函数（）{
返回此.value；
});
//如果未选中任何复选框，则不使用它们进行筛选
如果（复选框.length==0）{
退货产品；
}
返回产品。过滤器（函数（）{
categories=$（this.data（“category”）.toString（）.split（“”）；
让val=true；
复选框。每个（函数（）{
如果（！categories.includes（此[0]））{
val=假；
回来
}