Skip to content

I
i20rzslider
Commit 5a82d8a3 authored by Valentin Hervieu's avatar Valentin Hervieu
Browse files
Options

Update demo for 5.4.0

parent a816c905
Hide whitespace changes
Inline Side-by-side
Showing with 75 additions and 34 deletions
demo.js
View file @ 5a82d8a3
var app = angular.module('rzSliderDemo', ['rzModule', 'ui.bootstrap', 'hljs', 'ngSanitize']);
app.directive('showCode', function() {
app.directive('showCode', function () {
return {
scope: {
jsFile: '@',
......@@ -10,21 +10,21 @@ app.directive('showCode', function() {
};
});
app.directive('clickableLabel', function() {
app.directive('clickableLabel', function () {
return {
restrict: 'E',
scope: {label: '='},
replace: true,
template: "<button ng-click='onclick(label)' style='cursor: pointer;'>click me - {{label}}</button>",
link: function(scope, elem, attrs){
scope.onclick = function(label){
link: function (scope, elem, attrs) {
scope.onclick = function (label) {
alert("I'm " + label);
};
}
};
});
app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
app.controller('MainCtrl', function ($scope, $rootScope, $timeout, $modal) {
//Minimal slider config
$scope.minSlider = {
value: 10
......@@ -117,12 +117,11 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
}
};
//Slider with selection bar
$scope.color_slider_bar = {
value: 12,
options: {
showSelectionBar: true,
getSelectionBarColor: function(value) {
getSelectionBarColor: function (value) {
if (value <= 3)
return 'red';
if (value <= 6)
......@@ -134,11 +133,10 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
}
};
//Slider with selection bar
$scope.color_slider_pointer = {
value: 12,
options: {
getPointerColor: function(value) {
getPointerColor: function (value) {
if (value <= 3)
return 'red';
if (value <= 6)
......@@ -150,6 +148,25 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
}
};
$scope.color_slider_tick = {
value: 0,
options: {
ceil: 12,
floor: 0,
showSelectionBar: true,
showTicks: true,
getTickColor: function (value) {
if (value < 3)
return 'red';
if (value < 6)
return 'orange';
if (value < 9)
return 'yellow';
return '#2AE02A';
}
}
};
//Slider config with floor, ceil and step
$scope.slider_floor_ceil = {
value: 12,
......@@ -186,13 +203,13 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
$scope.slider_callbacks = {
value: 100,
options: {
onStart: function() {
onStart: function () {
$scope.otherData.start = $scope.slider_callbacks.value * 10;
},
onChange: function() {
onChange: function () {
$scope.otherData.change = $scope.slider_callbacks.value * 10;
},
onEnd: function() {
onEnd: function () {
$scope.otherData.end = $scope.slider_callbacks.value * 10;
}
}
......@@ -210,7 +227,7 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
options: {
floor: 0,
ceil: 500,
translate: function(value) {
translate: function (value) {
return '$' + value;
}
}
......@@ -223,7 +240,7 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
options: {
floor: 0,
ceil: 500,
translate: function(value, sliderId, label) {
translate: function (value, sliderId, label) {
switch (label) {
case 'model':
return '<b>Min price:</b> $' + value;
......@@ -244,7 +261,7 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
ceil: 500,
step: 100,
showTicksValues: true,
translate: function(value) {
translate: function (value) {
return '<b>Price:</b> $' + value;
}
}
......@@ -314,7 +331,7 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
floor: 0,
ceil: 10,
showTicks: true,
ticksTooltip: function(v) {
ticksTooltip: function (v) {
return 'Tooltip for ' + v;
}
}
......@@ -327,7 +344,7 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
floor: 0,
ceil: 10,
showTicksValues: true,
ticksValuesTooltip: function(v) {
ticksValuesTooltip: function (v) {
return 'Tooltip for ' + v;
}
}
......@@ -431,7 +448,7 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
vertical: true,
showSelectionBar: true,
showTicksValues: true,
ticksValuesTooltip: function(v) {
ticksValuesTooltip: function (v) {
return 'Tooltip for ' + v;
}
}
......@@ -466,9 +483,9 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
ceil: 10
}
};
$scope.toggle = function() {
$scope.toggle = function () {
$scope.visible = !$scope.visible;
$timeout(function() {
$timeout(function () {
$scope.$broadcast('rzSliderForceRender');
});
};
......@@ -483,14 +500,13 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
high: 50
}
};
$scope.openModal = function() {
$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.
var formatToPercentage = function(value) {
var formatToPercentage = function (value) {
return value + '%';
};
......@@ -505,28 +521,27 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
ceil: 100,
translate: formatToPercentage
};
$scope.ok = function() {
$scope.ok = function () {
$modalInstance.close($scope.percentages);
};
$scope.cancel = function() {
$scope.cancel = function () {
$modalInstance.dismiss();
};
},
resolve: {
values: function() {
values: function () {
return $scope.percentages;
}
}
});
modalInstance.result.then(function(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.
});
};
//Slider inside tabs
$scope.tabSliders = {
slider1: {
......@@ -536,13 +551,12 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
value: 200
}
};
$scope.refreshSlider = function() {
$timeout(function() {
$scope.refreshSlider = function () {
$timeout(function () {
$scope.$broadcast('rzSliderForceRender');
});
};
//Slider with draggable range
$scope.slider_all_options = {
minValue: 2,
......@@ -561,7 +575,7 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
rightToLeft: false
}
};
$scope.toggleHighValue = function() {
$scope.toggleHighValue = function () {
if ($scope.slider_all_options.maxValue != null) {
$scope.slider_all_options.maxValue = undefined;
} else {
......
index.html
View file @ 5a82d8a3
......@@ -145,6 +145,15 @@
<show-code js-file="color_slider_pointer" html-file="singleSlider"></show-code>
</article>
<article>
<h2>Slider with dynamic tick color</h2>
<rzslider
rz-slider-model="color_slider_tick.value"
rz-slider-options="color_slider_tick.options"
></rzslider>
<show-code js-file="color_slider_tick" html-file="singleSlider"></show-code>
</article>
<article>
<h2>Slider with custom floor/ceil/step</h2>
<rzslider
......
snippets/color_slider_tick.js 0 → 100644
View file @ 5a82d8a3
$scope.slider = {
value: 0,
options: {
ceil: 12,
floor: 0,
showSelectionBar: true,
showTicks: true,
getTickColor: function (value) {
if (value < 3)
return 'red';
if (value < 6)
return 'orange';
if (value < 9)
return 'yellow';
return '#2AE02A';
}
}
};
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