Change max/min values of range slider

Question

I need to change the max and min values of the range sliders in onsen-ui. By default, it appears to be from 0 to 100 (min to max). Is there any way to edit these values?

Answer 1

You can set min and max attributes in <input> tag.

<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>