Javascript 动态输入[范围]的滑块位置，以角度变化最小/最大值？

因此，我有一个输入[type=range]，其中min和max属性根据$http调用而改变

  <input type="range" name="bidSlider" id="bidSlider" min="{{bid.min}}" max="{{bid.max}}" ng-model="bid.value" step="1">

bid.max = 1.5 * bid.value;
bid.min = .5 * bid.value;

bid.max=1.5*bid.value；
bid.min=.5*bid.value；

在$http调用返回之前，bid.value是未定义的。我可以将bid.min和bid.max初始化为一些默认值，但是这将是一个非常糟糕的体验，因为我无法真正猜测bid.min和bid.max是什么（它们基于bid.value），因为bid.value可以低至50，也可以高达数千

如果我没有初始化bid.min或bid.max的默认值，则范围的最小值/最大值默认为0-100，并且通常滑块一直位于右侧或左侧

处理这种情况的最佳方法是什么

编辑：

---

这不是一个滑块跳跃的问题，因为它发生得很快。。。这是因为一旦设置了bid.value、bid.min和&bid.max，滑块不会相对于新范围重新定位自身，而是滑块（bid.value）相对于默认范围重新定位自身，0－100，所以它看起来是在最小范围或最大范围，当事实上该值落在范围的中间时。

您也可以隐藏元素直到Ajax加载为止，然后您可以显示一些加载图像，这将告诉用户UI控制器正在加载

。

<input ng-if="bid.min && bid.min" type="range" name="bidSlider" id="bidSlider" 
min="{{bid.min}}" max="{{bid.max}}" ng-model="bid.value" step="1">
<img ng-if="!bid.min || !bid.max" ng-src="loadingImg.jpg" width="50" height="50">

---

所以我通过在ajax调用返回时追加输入来解决这个问题。因此，上面的plunker是一个非常简化的版本。在我的实际代码中，我是在一个角度指令中这样做的，这就是为什么它被包装成一个链接函数。BiddingValue:Finish事件在带有bid.value的ajax调用返回时广播，bid对象（具有计算出的最小值和最大值）作为参数

link: function (scope, elem) {
    scope.$on('BiddingValue:Finish', function (evt, params) {
          var input = ' <input type="range" name="bidSlider" id="bidSlider" min="'+{{bid.min}}+'" max="'+{{bid.max}}+'" ng-model="bid.value" step="1">';
          elem.append(input);
          $compile(elem)(scope);
        });
    }

链接：功能（范围、要素）{
作用域：$on（'BiddingValue:Finish'，函数（evt，参数）{
var输入=“”；
元素追加（输入）；
$compile（elem）（范围）；
});
}

嗨！谢谢你的回复，我应该澄清一下。。。这不是一个跳跃的问题，因为它发生得很快。。。这是因为一旦bid.min&&bid.max被设置，滑块就不会相对于新范围重新定位，相反，它的位置相对于0到100的默认范围，所以它看起来是在最小值或最大值时，实际上值落在范围的中间。如果检查元素，则填充最小值和最大值。我相信这与出价有关。价值是一种模式，而不是价值。如果我将ngModel更改为value，它可以正常工作，但是我需要将其保留为ngModel，因为另一个输入[number]依赖它。为什么要创建自己的指令..因为angular

ng if

提供了相同的东西..我在回答中解释了，因为我的应用程序是一个非常大的应用程序，我想重用这个组件。当你有像

ng if

这样的指令时，创建不必要的东西是不好的..如果我的答案是，，对你有什么帮助吗谢谢