有没有人将锚标记作为加号和减号函数来增加和减少你在noUIslider滑块上的值？我还没有使用noUIslider找到与此相关的任何内容，但我希望之前有人做过。我在下面创建了一个滑块的示例。
qdata['calc-rate'] = {value:4,type:"percent",decimals:3,post:"%",interface:"slider",min:0,max:10,inc:.125,label:'Interest Rate',display:''};
var f = qdata['calc-rate'];
var val = f['value'];
var sliderInterest = document.getElementById("paymentSliderInterest");
noUiSlider.create(sliderInterest, {
start:val,
behaviour:'tap',
range:{'min':0,'max':10},
connect:"lower",
step:f.inc,
format: wNumb({decimals: f.decimals})
});
sliderInterest.noUiSlider.on('slide', setInterestSliderDisplay);
答案 0 :(得分：0)
您可以使用文档中的keypress example，但将事件从keypress更改为按钮点击。
它使用step选项获取下一步和上一步：
button.addEventListener('click', function( e ) {
var values = keypressSlider.noUiSlider.get();
var value = Number(values[handle]);
// [[handle0_down, handle0_up], [handle1_down, handle1_up]]
var steps = keypressSlider.noUiSlider.steps();
// [down, up]
var step = steps[handle];
// set slider
// ...
});
答案 1 :(得分：0)
function incRateSlider(e){
// changes slider rate value using plus and minus buttons
if(e){ e.preventDefault(); }
var f = qdata['calc-rate'];
var id = $(this).attr("id");
var dir = 1;
if(id == "leftCircleRate"){ dir = -1; }
//console.log(f.value);
var newval = +f.value + +(dir * f.inc);// add or subtract values
if(newval > f.max){ newval = f.max;}
else if(newval < f.min){ newval = f.min; }
var slider = document.getElementById('paymentSliderInterest');
slider.noUiSlider.set(newval); //this sets the value for the slider "super necessary"
setInterestSliderDisplay(newval);
}
由于我为所需的'calc-rate'提供了自己的数据集，因此可以根据所选的id使用'f.inc'增加或减少，以便将滑块移动一步时间。如果没有足够的清晰度告诉我如何工作，那么我可以编辑更多它是有意义的。
答案 2 :(得分：0)
可以使用“ noUiSlider.get（）”和“ noUiSlider.set（）”方法来实现。我已经完成了日期和金额。请查看下面的代码，如果您有任何问题，请告诉我。
请不要忘记在下面的脚本中查看stepSize变量。您可以自定义步长。在日期中，您可以选择年或月。希望这对某人有帮助。
简单数字或金额
var connectSlider = document.getElementById('slider-connect');
noUiSlider.create(connectSlider, {
start: 100,
connect: [true, false],
range: {
'min': 0,
'max': 500
},
step : 1,
tooltips: wNumb({decimals: 0, suffix: 'K'}),
format: wNumb({decimals: 0})
});
connectSlider.noUiSlider.on('update', function (values, handle) {
document.getElementById('event-start').innerHTML = values[0] + "K";
//var myVal = connectSlider.noUiSlider.get();
});
function manualStep (direction){
var currentPosition = parseInt(connectSlider.noUiSlider.get());
var stepSize = 100;
if(direction == 'f'){
currentPosition += stepSize;
}
if(direction == 'b'){
currentPosition -= stepSize;
}
currentPosition = (Math.round(currentPosition / stepSize) * stepSize);
connectSlider.noUiSlider.set(currentPosition);
}
document.getElementById('stepforward').onclick = function() {manualStep("f")};
document.getElementById('stepback').onclick = function() {manualStep("b")};<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/12.0.0/nouislider.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/12.0.0/nouislider.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wnumb/1.1.0/wNumb.js"></script>
<p>
Some Amount
</p>
<div id="slider-connect"></div>
<div class="example-val" id="event-start">34</div>
<div class="example-val" id="event-end"></div>
<button id="stepback">Decrease</button>
<button id="stepforward">Increase</button>
日期滑块
// Create a new date from a string, return as a timestamp.
function timestamp(str) {
return new Date(str).getTime();
}
var dateSlider = document.getElementById('slider-date');
var dateNow = timestamp(Date.now());
noUiSlider.create(dateSlider, {
// Create two timestamps to define a range.
range: {
min: timestamp('2012'),
max: timestamp(dateNow)
},
// Steps of one week
step: 24 * 60 * 60 * 1000,
// Two more timestamps indicate the handle starting positions.
start: timestamp('2015'),
connect: [true, false],
tooltips: true,
// No decimals
format: { to: toFormat, from: Number }
});
function toFormat ( v ) {
return formatDate(new Date(v));
}
var dateValues = [
document.getElementById('event-start'),
document.getElementById('event-end')
];
dateSlider.noUiSlider.on('update', function (values, handle) {
dateValues[handle].innerHTML = values[handle];
});
// Create a string representation of the date.
function formatDate(date) {
// Create a list of day and month names.
var months = [
"January", "February", "March",
"April", "May", "June", "July",
"August", "September", "October",
"November", "December"
];
return months[date.getMonth()] + ", " +
date.getFullYear();
}
function manualStep (direction){
var currentPosition = dateSlider.noUiSlider.get();
var stepSize = 'month';
currentPosition = new Date(currentPosition);
if(stepSize === 'month'){
if(direction === 'f'){
currentPosition = new Date(currentPosition.setMonth(currentPosition.getMonth()+1));
}
if(direction === 'b'){
currentPosition = new Date(currentPosition.setMonth(currentPosition.getMonth()-1));
}
}
if(stepSize === 'year'){
if(direction === 'f'){
currentPosition = new Date(currentPosition.setFullYear(currentPosition.getFullYear()+1));
}
if(direction === 'b'){
currentPosition = new Date(currentPosition.setFullYear(currentPosition.getFullYear()-1));
}
}
dateSlider.noUiSlider.set(currentPosition);
}
document.getElementById('stepforward').onclick = function() {manualStep("f")};
document.getElementById('stepback').onclick = function() {manualStep("b")};<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/12.0.0/nouislider.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/12.0.0/nouislider.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wnumb/1.1.0/wNumb.js"></script>
<p>
Some date:
</p>
<div id="slider-date"></div>
<div class="example-val" id="event-start"></div>
<div class="example-val" id="event-end"></div>
<button id="stepback">Decrease</button>
<button id="stepforward">Increase</button>