更改范围滑块的 max/min 个值

Question

我需要更改 onsen-ui 中范围滑块的最大值和最小值。默认情况下，它似乎是从 0 到 100（最小到最大）。有什么方法可以编辑这些值吗？

Answer 1

您可以在 <input> 标签中设置 min 和 max 属性。

<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/onsenui.min.js"></script>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsen-css-components.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsenui.css" rel="stylesheet"/>

<script>
  ons.bootstrap();
</script>
    <ons-page ng-init="slider=30">

      <ons-toolbar>
        <div class="center">
          Ranges
        </div>
      </ons-toolbar>

      <ons-icon icon="fa-volume-down" class="lower"></ons-icon>
      <input type="range" min="20" max="60" class="range" ng-model="slider">
      <ons-icon icon="fa-volume-up"></ons-icon>
      <p>{{slider}}</p>
    </ons-page>

Answer 2

否。 Ons 范围的值为 0 到 100。您可以使用 value 属性将默认值设置为范围。所以，如果你想改变范围值，你可以通过 ng-model 做一些数学论文来实现。例如，我在下面的示例中设置了范围 min=10 和 max=300 以及比例因子=10：

<script>
  ons.bootstrap();
</script>
    <ons-page>
Range in meters: <ons-range value="10" ng-model="range"></ons-range> 
{{(((range*10)>=10&&(range*10)<=300)&&range*10+'meters')||(....)}}

    </ons-page>

Answer 3

是的，您可以更改 ONSEN ons-range 最小/最大属性

<ons-range min="0" max="10" value="5" id="myrange"></ons-range>

您还可以在脚本中动态更改 min/max

var slider =  document.getElementById("myrange");
slider.setAttribute('step', 1);
slider.setAttribute('value', 0);
slider.setAttribute('min', 0);
slider.setAttribute('max', 50);

更改范围滑块的 max/min 个值

Change max/min values of range slider

onsen-ui