Jquery 使用Bootstrap 4范围滑块中的单击功能添加增量/减量

我用BS和bootstrap-slider.js构建了这个范围滑块，通过拖动它可以很好地工作：

<div class="container range">
  <div class="row">
    <div class="col-sm-2">
    </div>
    <div class="col-sm-8">
      <div id="ex6CurrentSliderValLabel">
        <span id="ex6SliderVal">2.5</span>
      </div>
      <input id="ex6" type="text" data-slider-min="0" data-slider-max="4" data-slider-step="0.01" data-slider-value="2.5"/>
    </div>
    <div class="col-sm-2">
    </div>
  </div>
</div>

工作小提琴：

---

我还想添加加号和减号箭头（按钮）您只需使用引导滑块的

getValue

和

setValue

，即可使用

按钮

单击或

+

或

-

在我为您创建的

演示中对
滑块
的值进行增量和减量

在
增量
中，您将获得当前值，并通过设置该值并将滑块的值添加到
0.01
float
number
来增加该值。为了确保我们添加的是
正确的
浮点
值
，我们可以使用函数来确保我们添加的是浮点
十进制
而不是正整数

在
减量
中，我们使用相同的方法，但在这种情况下，我们减去
滑块的值
，并向后移动以获得视觉效果，同时更新跨度文本

现场演示：


让mySlider=$（“#ex6”）.slider（）//启动滑块
设spanText=$（“#ex6SliderVal”）//span text
设addValue=0.01//将浮点添加到增量
$（“#ex6”）。在（“幻灯片”上，函数（slideEvt）{
spanText.text（slideEvt.value）
});
//增量
$（“.add”）。在（“单击”，函数（）{
让currValue=mySlider.slider（'getValue'）；//获取当前值
mySlider.slider（'setValue'，parseFloat（currValue+addValue）.toFixed（2））//滑块的增量值
spanText.text（currValue）//显示span
});
//减量
$（“.subtract”）。单击（“单击”，函数（）{
让currValue=mySlider.slider（'getValue'）；//获取当前值
mySlider.slider（'setValue'，parseFloat（currValue-addValue）.toFixed（2））//滑块的净值递减
spanText.text（currValue）//显示span
});
.range{
边缘顶端：40px；
文本对齐：居中；
}
#ex6CurrentSliderValLabel{
边缘底部：20px；
文本对齐：居中；
字体大小：56px；
字号：600；
}
.slider.slider-horizontal{
宽度：100%；
}
.slider.slider水平：在{}之前
.减去{
光标：指针；
保证金权利：6%；
}
.添加{
光标：指针；
左缘：6%；
}

0
有黑客行为，需要重构，但它可以工作


var slider=新滑块（#ex6”）；
var valuecontenner=document.getElementById（“ex6SliderVal”）；
slider.on（“slide”，函数（sliderValue）{
valuecontenner.textContent=sliderValue；
});
函数递增递减（el，值）{
让currentValue=slider.getValue（）；
如果（el[0].id==“正”）{
slider.setValue（当前值+值）
}else if（el[0].id==“减号”）{
slider.setValue（当前值-值）
}
valuecontenner.textContent=滑块。_state.value[0]；
}
$（'.container.range'）
.off（'单击'、'加'、'减'）
.on（'点击'，'加号，'减号'）函数（e）{
if（$（this）.attr（'id'）.match（'plus'））{
incrementDecrement（$（this），1）//第二个参数确定增量步长
}否则{
递增递减（$（this），0.1）//第二个参数决定递减步长
}
})

2.5
+
-
这正是我想要的。非常感谢。只有一件小事，第一次增量单击没有正确注册。当您拖动数字，然后单击增量（+）时，它也不会注册。不过这没什么大不了的。
$("#ex6").slider();
$("#ex6").on("slide", function(slideEvt) {
    $("#ex6SliderVal").text(slideEvt.value);
});