允許將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/