Skip to content

I
i20rzslider
Commit 73f3160c authored by Valentin Hervieu's avatar Valentin Hervieu
Browse files
Options

Add a rz-slider-disabled attribute to the example page

parent d580e1cc
Show whitespace changes
Inline Side-by-side
Showing with 115 additions and 105 deletions
index.html
View file @ 73f3160c
...@@ -2,11 +2,11 @@ ...@@ -2,11 +2,11 @@
<html ng-app="plunker"> <html ng-app="plunker">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>AngularJS Touch Slider</title> <title>AngularJS Touch Slider</title>
<link rel="stylesheet" href="demo.css" /> <link rel="stylesheet" href="demo.css"/>
<link rel="stylesheet" href="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.css" /> <link rel="stylesheet" href="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.css"/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>
<!-- Latest compiled and minified CSS --> <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
...@@ -14,14 +14,15 @@ ...@@ -14,14 +14,15 @@
<body ng-controller="MainCtrl"> <body ng-controller="MainCtrl">
<div class="wrapper"> <div class="wrapper">
<header> <header>
<h1>AngularJS Touch Slider</h1> <h1>AngularJS Touch Slider</h1>
</header> </header>
<article> <article>
<h2>Min/max slider example</h2> <h2>Min/max slider example</h2>
Value: <pre>{{ priceSlider | json }}</pre> Value:
<pre>{{ priceSlider | json }}</pre>
<input type="text" ng-model="priceSlider.min"/><br/> <input type="text" ng-model="priceSlider.min"/><br/>
<input type="text" ng-model="priceSlider.max"/><br/> <input type="text" ng-model="priceSlider.max"/><br/>
...@@ -103,6 +104,15 @@ ...@@ -103,6 +104,15 @@
rz-slider-show-ticks-value="true"></rzslider> rz-slider-show-ticks-value="true"></rzslider>
</article> </article>
<article>
<h2>Disabled slider example</h2>
<label>Disable slider <input type="checkbox" ng-model="disableSlider"></label>
<rzslider rz-slider-model="priceSlider8"
rz-slider-floor="0"
rz-slider-ceil="10"
rz-slider-disabled="disableSlider"></rzslider>
</article>
<article> <article>
<h2>Sliders into modal</h2> <h2>Sliders into modal</h2>
Normal slider value: {{percentages.normal.low}}% Normal slider value: {{percentages.normal.low}}%
...@@ -112,17 +122,16 @@ ...@@ -112,17 +122,16 @@
<button type="button" ng-click="openModal()" class="btn btn-default btn-lg">Open Modal!</button> <button type="button" ng-click="openModal()" class="btn btn-default btn-lg">Open Modal!</button>
</article> </article>
</div> </div>
</body> </body>
<script src="angular.min.js"></script> <script src="angular.min.js"></script>
<script src="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.min.js"></script> <script src="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.js"></script>
<script> <script>
var app = angular.module('plunker', ['ui.bootstrap','rzModule']); var app = angular.module('plunker', ['ui.bootstrap', 'rzModule']);
app.controller('MainCtrl', function($rootScope,$scope,$modal) app.controller('MainCtrl', function($rootScope, $scope, $modal) {
{
$scope.priceSlider = { $scope.priceSlider = {
min: 100, min: 100,
max: 400, max: 400,
...@@ -130,6 +139,8 @@ ...@@ -130,6 +139,8 @@
floor: 0 floor: 0
}; };
$scope.disableSlider = true;
$scope.priceSlider2 = 150; $scope.priceSlider2 = 150;
$scope.priceSlider3 = 250; $scope.priceSlider3 = 250;
$scope.priceSlider4 = 5; $scope.priceSlider4 = 5;
...@@ -139,33 +150,32 @@ ...@@ -139,33 +150,32 @@
min: 2, min: 2,
max: 8 max: 8
}; };
$scope.priceSlider8 = 5;
$scope.translate = function(value) $scope.translate = function(value) {
{
return '$' + value; return '$' + value;
}; };
var alphabetArray = 'abcdefghijklmnopqrstuvwxyz'.split(''); var alphabetArray = 'abcdefghijklmnopqrstuvwxyz'.split('');
$scope.letter = 5; $scope.letter = 5;
$scope.letterMax = alphabetArray.length - 1; $scope.letterMax = alphabetArray.length - 1;
$scope.alphabetTranslate = function(value) $scope.alphabetTranslate = function(value) {
{
return alphabetArray[value].toUpperCase(); return alphabetArray[value].toUpperCase();
}; };
$scope.percentages = {normal:{low:15},range:{low:10,high:50}}; $scope.percentages = {normal: {low: 15}, range: {low: 10, high: 50}};
$scope.openModal = function() { $scope.openModal = function() {
var modalInstance = $modal.open({ var modalInstance = $modal.open({
templateUrl: 'sliderModal.html', templateUrl: 'sliderModal.html',
controller: function($scope, $modalInstance,values){ controller: function($scope, $modalInstance, values) {
$scope.percentages = JSON.parse(JSON.stringify(values)); //Copy of the object in order to keep original values in $scope.percentages in parent controller. $scope.percentages = JSON.parse(JSON.stringify(values)); //Copy of the object in order to keep original values in $scope.percentages in parent controller.
$scope.formatToPercentage = function(value){ $scope.formatToPercentage = function(value) {
return value+'%'; return value + '%';
}; };
$scope.ok = function(){ $scope.ok = function() {
$modalInstance.close($scope.percentages); $modalInstance.close($scope.percentages);
}; };
$scope.cancel = function(){ $scope.cancel = function() {
$modalInstance.dismiss(); $modalInstance.dismiss();
}; };
}, },
...@@ -176,11 +186,11 @@ ...@@ -176,11 +186,11 @@
} }
}); });
modalInstance.result.then(function(percentages){ modalInstance.result.then(function(percentages) {
$scope.percentages = percentages; $scope.percentages = percentages;
}); });
modalInstance.rendered.then(function(){ modalInstance.rendered.then(function() {
$rootScope.$broadcast('rzSliderForceRender');//Force refresh sliders on render. Otherwise bullets are aligned at left side. $rootScope.$broadcast('rzSliderForceRender');//Force refresh sliders on render. Otherwise bullets are aligned at left side.
}); });
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment