ion-custom-range

Custom range directive for Ionic Framework. It has the same look and feel of the input range component, except more additional features like custom ui, tips, control over min max values, click handler and also the double range slider.

Taken inspiration from https://github.com/bkuzmic/ion-custom-range

Usage

-Install using bower:

bower install --save ion-custom-range

-Add to index.html

    <link href="lib/ion-custom-range/dist/ion-custom-range.min.css" rel="stylesheet">
    <script src="lib/ion-custom-range/dist/ion-custom-range-min.js"></s</code>cript>

-add as dependency to app

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ionicCustomRange'])

-Use as normal range of ionic

<div class="item range">
  <i class="icon ion-volume-low"></i>
  <ion-custom-range ng-model="data.volume" min="0" max="100" tip="true"></ion-custom-range>
  <i class="icon ion-volume-high"></i>
</div>

Demo

If you are seeing this on desktop (chrome) then enable Device Mode


http://ion-custom-range.ask4kapil.xyz

Sample app code:

https://github.com/ask4kapil/range-slider

Preview app:

Preview on Ionic

Sample screens

Basic range: set min, max, value, tip(true/false) and step

Editable: listen for changes in min, max, value, tip and step values

Advanced range slider: Double range slider, custom css etc.

Code
https://github.com/ask4kapil/ion-custom-range

Leave a comment