角rzslider：最大值和最小值，最大值;範圍滑塊

Question

我正在使用rzslider的範圍滑塊，以行爲如下：

• 地板= -10，天花板= 10
• minRange = 1
• 起始值，minValue（最小值）= 1-5;包括maxValue = 5
• noSwitching =真

，我有什麼麻煩：

• 是minvalue需要的0天花板，以及包括maxValue需要的下限值爲0，所以範圍永遠不會是例如1-5。

---

編輯：

可能的值可以是：不允許-2,5或-4,1

值包括：2,4-或-9，-2

Answer 1

查看[https://jsfiddle.net/dyf8maqb/8中的範圍滑塊示例。

$scope.minRangeSlider = { 
    minValue: -5, 
    maxValue: 5, 
    options: { 
     floor: -10, 
     ceil: 10, 
     step: 1, 
     noSwitching: true, 
     minRange: 1, 
     onEnd: function() { 
      $scope.minRangeSlider.minValue = Math.min($scope.minRangeSlider.minValue,0); 
      $scope.minRangeSlider.maxValue = Math.max($scope.minRangeSlider.maxValue,0); 
     } 
    } 
}; 

Answer 2

像這樣的東西應該這樣做（見https://jsfiddle.net/dyf8maqb/11/）

<div style="width:50%;float:left"> 
    <rzslider rz-slider-model="minRangeSlider.value" rz-slider-options="minRangeSlider.options"></rzslider> 
</div> 
<div style="width:50%;float:left"> 
    <rzslider rz-slider-model="maxRangeSlider.value" rz-slider-options="maxRangeSlider.options"></rzslider> 
</div> 

$scope.minRangeSlider = { 
    value: -5, 
    options: { 
     floor: -10, 
     ceil: 0, 
     step: 1, 
     translate: function(value, id, label) { 
      return (label === 'ceil') ? '' : value; 
     } 
    } 
}; 

$scope.maxRangeSlider = { 
    value: 5, 
    options: { 
     floor: 0, 
     ceil: 10, 
     step: 1, 
     translate: function(value, id, label) { 
      return (label === 'floor') ? '' : value; 
     } 
    } 
};