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 @@
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AngularJS Touch Slider</title>
<link rel="stylesheet" href="demo.css" />
<link rel="stylesheet" href="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.css" />
<link rel="stylesheet" href="demo.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'>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
......@@ -14,115 +14,124 @@
<body ng-controller="MainCtrl">
<div class="wrapper">
<header>
<h1>AngularJS Touch Slider</h1>
</header>
<div class="wrapper">
<header>
<h1>AngularJS Touch Slider</h1>
</header>
<article>
<h2>Min/max slider example</h2>
Value: <pre>{{ priceSlider | json }}</pre>
<article>
<h2>Min/max slider example</h2>
Value:
<pre>{{ priceSlider | json }}</pre>
<input type="text" ng-model="priceSlider.min"/><br/>
<input type="text" ng-model="priceSlider.max"/><br/>
<input type="text" ng-model="priceSlider.min"/><br/>
<input type="text" ng-model="priceSlider.max"/><br/>
<rzslider
<rzslider
rz-slider-floor="priceSlider.floor"
rz-slider-ceil="priceSlider.ceil"
rz-slider-model="priceSlider.min"
rz-slider-high="priceSlider.max"
rz-slider-step="1"></rzslider>
</article>
</article>
<article>
<h2>Currency slider example</h2>
<article>
<h2>Currency slider example</h2>
Value: {{ priceSlider2 | json }}
<rzslider
Value: {{ priceSlider2 | json }}
<rzslider
rz-slider-floor="0"
rz-slider-ceil="450"
rz-slider-model="priceSlider2"
rz-slider-translate="translate"></rzslider>
</article>
<article>
<h2>One value slider example</h2>
Value: {{ priceSlider3 | json }}
<rzslider rz-slider-model="priceSlider3"
rz-slider-floor="50"
rz-slider-ceil="450"
rz-slider-always-show-bar="true"></rzslider>
</article>
<article>
<h2>Alphabet slider example</h2>
Value: {{ alphabetTranslate(letter) }}
<rzslider
</article>
<article>
<h2>One value slider example</h2>
Value: {{ priceSlider3 | json }}
<rzslider rz-slider-model="priceSlider3"
rz-slider-floor="50"
rz-slider-ceil="450"
rz-slider-always-show-bar="true"></rzslider>
</article>
<article>
<h2>Alphabet slider example</h2>
Value: {{ alphabetTranslate(letter) }}
<rzslider
rz-slider-floor="0"
rz-slider-ceil="letterMax"
rz-slider-model="letter"
rz-slider-translate="alphabetTranslate"></rzslider>
</article>
</article>
<article>
<article>
<h2>Slider with ticks example</h2>
Value: {{ priceSlider4 | json }}
<rzslider rz-slider-model="priceSlider4"
rz-slider-floor="0"
rz-slider-ceil="10"
rz-slider-show-ticks="true"></rzslider>
</article>
<article>
<h2>Slider with ticks value example</h2>
Value: {{ priceSlider5 | json }}
<rzslider rz-slider-model="priceSlider5"
rz-slider-floor="0"
rz-slider-ceil="10"
rz-slider-show-ticks-value="true"></rzslider>
</article>
<article>
<h2>Slider with ticks value and visible bar example</h2>
Value: {{ priceSlider6 | json }}
<rzslider rz-slider-model="priceSlider6"
rz-slider-floor="0"
rz-slider-ceil="10"
rz-slider-always-show-bar="true"
rz-slider-show-ticks-value="true"></rzslider>
</article>
<article>
<h2>Range Slider with ticks value example</h2>
Value: {{ priceSlider6 | json }}
<rzslider rz-slider-model="priceSlider7.min"
rz-slider-high="priceSlider7.max"
rz-slider-floor="0"
rz-slider-ceil="10"
rz-slider-show-ticks-value="true"></rzslider>
</article>
<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>
Value: {{ priceSlider4 | json }}
<rzslider rz-slider-model="priceSlider4"
rz-slider-floor="0"
rz-slider-ceil="10"
rz-slider-show-ticks="true"></rzslider>
</article>
<article>
<h2>Slider with ticks value example</h2>
Value: {{ priceSlider5 | json }}
<rzslider rz-slider-model="priceSlider5"
rz-slider-floor="0"
rz-slider-ceil="10"
rz-slider-show-ticks-value="true"></rzslider>
</article>
<article>
<h2>Slider with ticks value and visible bar example</h2>
Value: {{ priceSlider6 | json }}
<rzslider rz-slider-model="priceSlider6"
rz-slider-floor="0"
rz-slider-ceil="10"
rz-slider-always-show-bar="true"
rz-slider-show-ticks-value="true"></rzslider>
</article>
<article>
<h2>Range Slider with ticks value example</h2>
Value: {{ priceSlider6 | json }}
<rzslider rz-slider-model="priceSlider7.min"
rz-slider-high="priceSlider7.max"
rz-slider-floor="0"
rz-slider-ceil="10"
rz-slider-show-ticks-value="true"></rzslider>
</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>
<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>
<script src="angular.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>
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 = {
min: 100,
max: 400,
......@@ -130,57 +139,58 @@
floor: 0
};
$scope.disableSlider = true;
$scope.priceSlider2 = 150;
$scope.priceSlider3 = 250;
$scope.priceSlider4 = 5;
$scope.priceSlider5 = 5;
$scope.priceSlider6 = 5;
$scope.priceSlider7 = {
min: 2,
max: 8
min: 2,
max: 8
};
$scope.priceSlider8 = 5;
$scope.translate = function(value)
{
$scope.translate = function(value) {
return '$' + value;
};
var alphabetArray = 'abcdefghijklmnopqrstuvwxyz'.split('');
$scope.letter = 5;
$scope.letterMax = alphabetArray.length - 1;
$scope.alphabetTranslate = function(value)
{
$scope.alphabetTranslate = function(value) {
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() {
var modalInstance = $modal.open({
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.formatToPercentage = function(value){
return value+'%';
};
$scope.ok = function(){
$scope.formatToPercentage = function(value) {
return value + '%';
};
$scope.ok = function() {
$modalInstance.close($scope.percentages);
};
$scope.cancel = function(){
$scope.cancel = function() {
$modalInstance.dismiss();
};
},
resolve: {
values: function() {
return $scope.percentages;
}
values: function() {
return $scope.percentages;
}
}
});
modalInstance.result.then(function(percentages){
$scope.percentages = percentages;
});
modalInstance.result.then(function(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.
});
};
......
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