shaoner/Ionic Multiple Range.markdown

## index.html
<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Ionic Template</title>

    <link href="https://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">
    <script src="https://code.ionicframework.com/nightly/js/ionic.bundle.min.js"></script>
  </head>
  <body ng-controller="MyCtrl">
    <ion-content>
      <div class="list">
        <div class="item item-divider">Age:</div>
        <div class="item range range-positive">
          <div class="range-label">{{from}}</div>
          <ui-multi-range ng-step="1" ng-min="ageMin" ng-max="ageMax" ng-model-min="from" ng-model-max="to"></ui-multi-range>
          <div class="range-label">{{to}}</div>
        </div>
      </div>
    </ion-content>
  </body>
</html>

## Ionic Multiple Range.markdown

      
    Raw
  

              Ionic Multiple Range.markdown
            
          
    Ionic Multiple Range

A Pen by Alexandre Laurent on CodePen.
License.

  
## script.js
'use strict';

/**
 * @ngInject
 */
function MultiRangeDirective ($compile) {
    var directive = {
        restrict: 'E',
        scope: {
            ngModelMin: '=',
            ngModelMax: '=',
            ngMin: '=',
            ngMax: '=',
            ngStep: '='
        },
        link: link
    };

    return directive;

    ////////////////////

    function link ($scope, $element, $attrs) {
        var min, max, step, $inputMin = angular.element('<input type="range">'), $inputMax;
        if (typeof $scope.ngMin != 'undefined') {
            min = $scope.ngMin;
            $inputMin.attr('min', min);
        } else {
            min = 0;
        }
        if (typeof $scope.ngMax != 'undefined') {
            max = $scope.ngMax;
            $inputMin.attr('max', max);
        } else {
            max = 100;
        }
        if (typeof $scope.ngStep != 'undefined') {
            $inputMin.attr('step', $scope.ngStep);
        }
        $inputMax = $inputMin.clone();
        $inputMin.attr('ng-model', 'ngModelMin');
        $inputMax.attr('ng-model', 'ngModelMax');
        $compile($inputMin)($scope);
        $compile($inputMax)($scope);
        $element.append($inputMin).append($inputMax);
        $scope.ngModelMin = $scope.ngModelMin || min;
        $scope.ngModelMax = $scope.ngModelMax || max;

        $scope.$watch('ngModelMin', function (newVal, oldVal) {
            if (newVal > $scope.ngModelMax) {
                $scope.ngModelMin = oldVal;
            }
        });

        $scope.$watch('ngModelMax', function (newVal, oldVal) {
            if (newVal < $scope.ngModelMin) {
                $scope.ngModelMax = oldVal;
            }
        });
    }
}

angular.module('ionicApp', ['ionic'])
.directive('uiMultiRange', MultiRangeDirective)
.controller('MyCtrl', function($scope) {
  $scope.ageMin = 18;
  $scope.ageMax = 42;
  $scope.from = 30;
  $scope.to = 40;
})


## style.scss
// Usually the following is retrieve from the ionic scss

@mixin flex($fg: 1, $fs: null, $fb: null) {
  -webkit-box-flex: $fg;
  -webkit-flex: $fg $fs $fb;
  -moz-box-flex: $fg;
  -moz-flex: $fg $fs $fb;
  -ms-flex: $fg $fs $fb;
  flex: $fg $fs $fb;
}

$range-default-track-bg:          #ccc !default;

// Multi-range css
ui-multi-range {
    @include flex(1);
    position: relative;
    height: 50px;
    input[type=range] {
        position: absolute;
        display: block;
        width: 100%;
        margin: 0;
        padding: 0 2px;
        overflow: hidden;
        border: 0;
        border-radius: 1px;
        outline: none;
        pointer-events: none;

        &:active,
        &:focus {
            outline: none;
        }

        &::-webkit-slider-thumb {
            position: relative;
            cursor: pointer;
            pointer-events: all;
            &::before {
                content: ' ';
                display: block;
                position: absolute;
                top: 13px;
                left: 100%;
                width: 2000px;
                height: 2px;
            }
        }

        &:nth-child(2) {
            background: none;

            &::-webkit-slider-thumb::before {
                background-color: $range-default-track-bg;
            }
        }
    }
}
	<html ng-app="ionicApp">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

	<title>Ionic Template</title>

	<link href="https://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">
	<script src="https://code.ionicframework.com/nightly/js/ionic.bundle.min.js"></script>
	</head>
	<body ng-controller="MyCtrl">
	<ion-content>
	<div class="list">
	<div class="item item-divider">Age:</div>
	<div class="item range range-positive">
	<div class="range-label">{{from}}</div>
	<ui-multi-range ng-step="1" ng-min="ageMin" ng-max="ageMax" ng-model-min="from" ng-model-max="to"></ui-multi-range>
	<div class="range-label">{{to}}</div>
	</div>
	</div>
	</ion-content>
	</body>
	</html>
	'use strict';

	/**
	* @ngInject
	*/
	function MultiRangeDirective ($compile) {
	var directive = {
	restrict: 'E',
	scope: {
	ngModelMin: '=',
	ngModelMax: '=',
	ngMin: '=',
	ngMax: '=',
	ngStep: '='
	},
	link: link
	};

	return directive;

	////////////////////

	function link ($scope, $element, $attrs) {
	var min, max, step, $inputMin = angular.element('<input type="range">'), $inputMax;
	if (typeof $scope.ngMin != 'undefined') {
	min = $scope.ngMin;
	$inputMin.attr('min', min);
	} else {
	min = 0;
	}
	if (typeof $scope.ngMax != 'undefined') {
	max = $scope.ngMax;
	$inputMin.attr('max', max);
	} else {
	max = 100;
	}
	if (typeof $scope.ngStep != 'undefined') {
	$inputMin.attr('step', $scope.ngStep);
	}
	$inputMax = $inputMin.clone();
	$inputMin.attr('ng-model', 'ngModelMin');
	$inputMax.attr('ng-model', 'ngModelMax');
	$compile($inputMin)($scope);
	$compile($inputMax)($scope);
	$element.append($inputMin).append($inputMax);
	$scope.ngModelMin = $scope.ngModelMin \|\| min;
	$scope.ngModelMax = $scope.ngModelMax \|\| max;

	$scope.$watch('ngModelMin', function (newVal, oldVal) {
	if (newVal > $scope.ngModelMax) {
	$scope.ngModelMin = oldVal;
	}
	});

	$scope.$watch('ngModelMax', function (newVal, oldVal) {
	if (newVal < $scope.ngModelMin) {
	$scope.ngModelMax = oldVal;
	}
	});
	}
	}

	angular.module('ionicApp', ['ionic'])
	.directive('uiMultiRange', MultiRangeDirective)
	.controller('MyCtrl', function($scope) {
	$scope.ageMin = 18;
	$scope.ageMax = 42;
	$scope.from = 30;
	$scope.to = 40;
	})
	// Usually the following is retrieve from the ionic scss

	@mixin flex($fg: 1, $fs: null, $fb: null) {
	-webkit-box-flex: $fg;
	-webkit-flex: $fg $fs $fb;
	-moz-box-flex: $fg;
	-moz-flex: $fg $fs $fb;
	-ms-flex: $fg $fs $fb;
	flex: $fg $fs $fb;
	}

	$range-default-track-bg: #ccc !default;

	// Multi-range css
	ui-multi-range {
	@include flex(1);
	position: relative;
	height: 50px;
	input[type=range] {
	position: absolute;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0 2px;
	overflow: hidden;
	border: 0;
	border-radius: 1px;
	outline: none;
	pointer-events: none;

	&:active,
	&:focus {
	outline: none;
	}

	&::-webkit-slider-thumb {
	position: relative;
	cursor: pointer;
	pointer-events: all;
	&::before {
	content: ' ';
	display: block;
	position: absolute;
	top: 13px;
	left: 100%;
	width: 2000px;
	height: 2px;
	}
	}

	&:nth-child(2) {
	background: none;

	&::-webkit-slider-thumb::before {
	background-color: $range-default-track-bg;
	}
	}
	}
	}