允许将jquery UI滑块设置为高于最大值或低于最小值

Question

我有一个jQuery UI滑块链接到数字文本框。滑块具有最大值和最小值。

请参阅ui slider with text box input或 Using knockout js with jquery ui sliders淘汰js实施。

我的问题是：是否可以将滑块的值设置为高于最大值或低于最小值？

如果value超出范围设置为范围的最大值或最小值：

$(element).slider("value", value); 

因此，例如，说的滑块代表月薪50和100月薪的百分比设置为10000.如果滑动滑块，它将从5000到10000变化，但我仍然希望用户能够输入范围以外的值。因此，如果用户输入12000，则滑块将滑动到最大值，并且如果用户输入2000，则滑块将滑动到最小值。

Answer 1

从答案适应于Using knockout js with jquery ui sliders

<h2>Slider Demo</h2> 
Savings: 
<input data-bind="value: savings, valueUpdate: 'afterkeydown'" 
/> 
<div style="margin: 10px" data-bind="slider: savings, sliderOptions: {min: 0, max: 100, range: 'min', step: 1}"></div> 

而这里的自定义绑定：

ko.bindingHandlers.slider = { 
    init: function (element, valueAccessor, allBindingsAccessor) { 
     var options = allBindingsAccessor().sliderOptions || {}; 
     $(element).slider(options); 
     ko.utils.registerEventHandler(element, "slidechange", function (event, ui) { 
      var value = valueAccessor(); 
      if(!(value < $(element).slider('option', 'min') || value > $(element).slider('option', 'max'))) 
      { 
      valueAccessor(ui.value); 
      } 
     }); 
     ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
      $(element).slider("destroy"); 
     }); 
     ko.utils.registerEventHandler(element, "slide", function (event, ui) { 
      var observable = valueAccessor(); 
      observable(ui.value); 
     }); 
    }, 
    update: function (element, valueAccessor) { 
     var value = ko.utils.unwrapObservable(valueAccessor()); 
     if (isNaN(value)) value = 0; 
     if (value < $(element).slider('option', 'min')) { 
      value = $(element).slider("option", "min"); 
     } else if (value > $(element).slider('option', 'max')) { 
      value = $(element).slider("option", "max"); 
     } 
     $(element).slider("value", value); 

    } 
}; 


var ViewModel = function() { 
    var self = this; 

    self.savings = ko.observable(10); 
    self.spent = ko.observable(5); 
    self.net = ko.computed(function() { 
     return self.savings() - self.spent(); 
    }); 
}; 

ko.applyBindings(new ViewModel()); 

我改编自这个答案的jsFiddle了。

Answer 2

您可以通过重写_trimAlignValue功能，我在我的评论指出实现这一目标：

$.ui.slider.prototype._trimAlignValue = function (val) { 
    var step = (this.options.step > 0) ? this.options.step : 1, 
     valModStep = val % step, 
     alignValue = val - valModStep; 

    if (Math.abs(valModStep) * 2 >= step) { 
     alignValue += (valModStep > 0) ? step : (-step); 
    } 
    return parseFloat(alignValue.toFixed(5)); 
}; 

这将影响每一个滑块在页面上 - 如果这不是你应该换此功能所需的效果在你自己的插件中（如果需要的话，我可以提供一个例子）。

这与您现有的KnockoutJS自定义绑定结合起来似乎效果不错。

实施例：http://jsfiddle.net/Aa5nK/7/