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


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


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

Sample app code:

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.


Leave a comment