Skip to content

Instantly share code, notes, and snippets.

@shaoner

shaoner/Ionic Multiple Range.markdown

Created April 21, 2016 19:19
Show Gist options
  • Save shaoner/c275f98a9bc88430cc047b3cd7c3ca3f to your computer and use it in GitHub Desktop.
Save shaoner/c275f98a9bc88430cc047b3cd7c3ca3f to your computer and use it in GitHub Desktop.
Download ZIP
Ionic Multiple Range
Raw
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>
Raw
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;
})
Raw
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;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment