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
Hide 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,115 +14,124 @@ ...@@ -14,115 +14,124 @@
<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/>
<rzslider <rzslider
rz-slider-floor="priceSlider.floor" rz-slider-floor="priceSlider.floor"
rz-slider-ceil="priceSlider.ceil" rz-slider-ceil="priceSlider.ceil"
rz-slider-model="priceSlider.min" rz-slider-model="priceSlider.min"
rz-slider-high="priceSlider.max" rz-slider-high="priceSlider.max"
rz-slider-step="1"></rzslider> rz-slider-step="1"></rzslider>
</article> </article>
<article> <article>
<h2>Currency slider example</h2> <h2>Currency slider example</h2>
Value: {{ priceSlider2 | json }} Value: {{ priceSlider2 | json }}
<rzslider <rzslider
rz-slider-floor="0" rz-slider-floor="0"
rz-slider-ceil="450" rz-slider-ceil="450"
rz-slider-model="priceSlider2" rz-slider-model="priceSlider2"
rz-slider-translate="translate"></rzslider> rz-slider-translate="translate"></rzslider>
</article> </article>
<article> <article>
<h2>One value slider example</h2> <h2>One value slider example</h2>
Value: {{ priceSlider3 | json }} Value: {{ priceSlider3 | json }}
<rzslider rz-slider-model="priceSlider3" <rzslider rz-slider-model="priceSlider3"
rz-slider-floor="50" rz-slider-floor="50"
rz-slider-ceil="450" rz-slider-ceil="450"
rz-slider-always-show-bar="true"></rzslider> rz-slider-always-show-bar="true"></rzslider>
</article> </article>
<article> <article>
<h2>Alphabet slider example</h2> <h2>Alphabet slider example</h2>
Value: {{ alphabetTranslate(letter) }} Value: {{ alphabetTranslate(letter) }}
<rzslider <rzslider
rz-slider-floor="0" rz-slider-floor="0"
rz-slider-ceil="letterMax" rz-slider-ceil="letterMax"
rz-slider-model="letter" rz-slider-model="letter"
rz-slider-translate="alphabetTranslate"></rzslider> rz-slider-translate="alphabetTranslate"></rzslider>
</article> </article>
<article> <article>
<h2>Slider with ticks example</h2> <h2>Slider with ticks example</h2>
Value: {{ priceSlider4 | json }} Value: {{ priceSlider4 | json }}
<rzslider rz-slider-model="priceSlider4" <rzslider rz-slider-model="priceSlider4"
rz-slider-floor="0" rz-slider-floor="0"
rz-slider-ceil="10" rz-slider-ceil="10"
rz-slider-show-ticks="true"></rzslider> rz-slider-show-ticks="true"></rzslider>
</article> </article>
<article> <article>
<h2>Slider with ticks value example</h2> <h2>Slider with ticks value example</h2>
Value: {{ priceSlider5 | json }} Value: {{ priceSlider5 | json }}
<rzslider rz-slider-model="priceSlider5" <rzslider rz-slider-model="priceSlider5"
rz-slider-floor="0" rz-slider-floor="0"
rz-slider-ceil="10" rz-slider-ceil="10"
rz-slider-show-ticks-value="true"></rzslider> rz-slider-show-ticks-value="true"></rzslider>
</article> </article>
<article> <article>
<h2>Slider with ticks value and visible bar example</h2> <h2>Slider with ticks value and visible bar example</h2>
Value: {{ priceSlider6 | json }} Value: {{ priceSlider6 | json }}
<rzslider rz-slider-model="priceSlider6" <rzslider rz-slider-model="priceSlider6"
rz-slider-floor="0" rz-slider-floor="0"
rz-slider-ceil="10" rz-slider-ceil="10"
rz-slider-always-show-bar="true" rz-slider-always-show-bar="true"
rz-slider-show-ticks-value="true"></rzslider> rz-slider-show-ticks-value="true"></rzslider>
</article> </article>
<article> <article>
<h2>Range Slider with ticks value example</h2> <h2>Range Slider with ticks value example</h2>
Value: {{ priceSlider6 | json }} Value: {{ priceSlider6 | json }}
<rzslider rz-slider-model="priceSlider7.min" <rzslider rz-slider-model="priceSlider7.min"
rz-slider-high="priceSlider7.max" rz-slider-high="priceSlider7.max"
rz-slider-floor="0" rz-slider-floor="0"
rz-slider-ceil="10" rz-slider-ceil="10"
rz-slider-show-ticks-value="true"></rzslider> rz-slider-show-ticks-value="true"></rzslider>
</article> </article>
<article> <article>
<h2>Sliders into modal</h2> <h2>Disabled slider example</h2>
Normal slider value: {{percentages.normal.low}}% <label>Disable slider <input type="checkbox" ng-model="disableSlider"></label>
</br> <rzslider rz-slider-model="priceSlider8"
Range slider values: {{percentages.range.low}}% and {{percentages.range.high}}% rz-slider-floor="0"
</br> rz-slider-ceil="10"
<button type="button" ng-click="openModal()" class="btn btn-default btn-lg">Open Modal!</button> rz-slider-disabled="disableSlider"></rzslider>
</article> </article>
</div> <article>
<h2>Sliders into modal</h2>
Normal slider value: {{percentages.normal.low}}%
</br>
Range slider values: {{percentages.range.low}}% and {{percentages.range.high}}%
</br>
<button type="button" ng-click="openModal()" class="btn btn-default btn-lg">Open Modal!</button>
</article>
</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,57 +139,58 @@ ...@@ -130,57 +139,58 @@
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;
$scope.priceSlider5 = 5; $scope.priceSlider5 = 5;
$scope.priceSlider6 = 5; $scope.priceSlider6 = 5;
$scope.priceSlider7 = { $scope.priceSlider7 = {
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();
}; };
}, },
resolve: { resolve: {
values: function() { values: function() {
return $scope.percentages; return $scope.percentages;
} }
} }
}); });
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