kazekagegaara/Range-Selector-in-Ionic.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>Range Selector</title>

    <link href="http://code.ionicframework.com/0.9.22/css/ionic.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/0.9.22/js/ionic.js"></script>
    <script src="http://code.ionicframework.com/0.9.22/js/angular/angular.min.js"></script>
    <script src="http://code.ionicframework.com/0.9.22/js/angular/angular-animate.min.js"></script>
    <script src="http://code.ionicframework.com/0.9.22/js/angular/angular-sanitize.min.js"></script>
    <script src="http://code.ionicframework.com/0.9.22/js/angular-ui/angular-ui-router.min.js"></script>
    <script src="http://code.ionicframework.com/0.9.22/js/ionic-angular.js"></script>
  </head>

  <body ng-controller="sampleController">

    <header-bar title="'Range Selector'" type="bar-positive"></header-bar>

    <content has-header="true" padding="true">

      Select number : <span>{{numberSelection}}</span>
      <div class="range range-positive">
        1000
        <input type="range" name="volume" min="1000" max="2000" value="{{numberSelection}}" ng-model="numberSelection">
        2000
      </div>

      <button class="button button-block button-positive" ng-click="showMeTheNumber();">
        Get Number
      </button>

    </content>

  </body>
</html>

## Range-Selector-in-Ionic.markdown

      
    Raw
  

              Range-Selector-in-Ionic.markdown
            
          
    Range Selector in Ionic

Range selector example in Ionic.
A Pen by Manit Singh Kalsi on CodePen.
License.

  
## script.js
angular.module('ionicApp', ['ionic','sampleController'])

angular.module('sampleController', [])

.controller('sampleController', function($scope) {
  $scope.numberSelection = 1500;

  $scope.showMeTheNumber = function(){
    alert($scope.numberSelection);
  }
})

## style.css
body {
  cursor: url('http://ionicframework.com/img/finger.png'), auto;
}
	<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>Range Selector</title>

	<link href="http://code.ionicframework.com/0.9.22/css/ionic.css" rel="stylesheet">
	<script src="http://code.ionicframework.com/0.9.22/js/ionic.js"></script>
	<script src="http://code.ionicframework.com/0.9.22/js/angular/angular.min.js"></script>
	<script src="http://code.ionicframework.com/0.9.22/js/angular/angular-animate.min.js"></script>
	<script src="http://code.ionicframework.com/0.9.22/js/angular/angular-sanitize.min.js"></script>
	<script src="http://code.ionicframework.com/0.9.22/js/angular-ui/angular-ui-router.min.js"></script>
	<script src="http://code.ionicframework.com/0.9.22/js/ionic-angular.js"></script>
	</head>

	<body ng-controller="sampleController">

	<header-bar title="'Range Selector'" type="bar-positive"></header-bar>

	<content has-header="true" padding="true">

	Select number : <span>{{numberSelection}}</span>
	<div class="range range-positive">
	1000
	<input type="range" name="volume" min="1000" max="2000" value="{{numberSelection}}" ng-model="numberSelection">
	2000
	</div>

	<button class="button button-block button-positive" ng-click="showMeTheNumber();">
	Get Number
	</button>

	</content>

	</body>
	</html>
	angular.module('ionicApp', ['ionic','sampleController'])

	angular.module('sampleController', [])

	.controller('sampleController', function($scope) {
	$scope.numberSelection = 1500;

	$scope.showMeTheNumber = function(){
	alert($scope.numberSelection);
	}
	})
	body {
	cursor: url('http://ionicframework.com/img/finger.png'), auto;
	}