javascript2016 javascript2016 - 3 months ago 15
AngularJS Question

Angular Ionic App - ui-slider won't show up and neither ion-range-how can I make it visible?

I am trying to include a ui-slider in my ionic app but it just won't show up. I also tried to use ionic-range but it won't show up as well.. I installed ui-slider, required it and loaded it in my index.html file.

<button class="btn btn-primary" ng-click="generate()" ng-show="!gen">
Generate Random Password</button>
<div ng-show="gen">
<h3>Length</h3><slider floor="8" ceiling="20" step="1" precision="1"
ng-model="leng" translate="currencyFormatting"></slider>
<h3>Symbols</h3><slider floor="0" ceiling="{{leng - nums}}" step="1"
precision="1" ng-model="syms" translate="currencyFormatting"></slider>
<h3>Numbers</h3><slider floor="0" ceiling="{{leng - syms}}" step="1"
precision="1" ng-model="nums" translate="currencyFormatting"></slider>
<button class="btn btn-success" ng-click="generatePassword(leng, syms, nums)"> Generate! </button>
</div>

Answer

Here is an example for Ionic slider.

http://codepen.io/zhipeng/pen/gBdDE

You might wanna use something like:

<div class="range" id="green"> <input type="range" name="syms" ng-model="syms" min="0" max="12"> </div>