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