Skip to content

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

Update demo site for 1.7.0

parent 3a65e308
Hide whitespace changes
Inline Side-by-side
Showing with 158 additions and 27 deletions
demo.js
View file @ 66430654
var app = angular.module('rzSliderDemo', ['rzModule', 'ui.bootstrap', 'hljs']);
app.directive('showCode', function () {
app.directive('showCode', function() {
return {
scope: {
jsFile: '@',
......@@ -10,7 +10,7 @@ app.directive('showCode', function () {
};
});
app.controller('MainCtrl', function ($scope, $rootScope, $timeout, $modal) {
app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
//Minimal slider config
$scope.minSlider = {
value: 10
......@@ -58,12 +58,32 @@ app.controller('MainCtrl', function ($scope, $rootScope, $timeout, $modal) {
}
};
//Slider with selection bar at the end
$scope.slider_visible_bar_end = {
value: 5,
options: {
floor: 0,
ceil: 10,
showSelectionBarEnd: true
}
};
//Slider with selection bar from a value
$scope.slider_visible_bar_from_value = {
value: 5,
options: {
floor: -10,
ceil: 10,
showSelectionBarFromValue: 0
}
};
//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)
......@@ -85,17 +105,28 @@ app.controller('MainCtrl', function ($scope, $rootScope, $timeout, $modal) {
}
};
//Slider config with floating values
$scope.slider_float = {
value: 0.5,
options: {
floor: 0,
ceil: 2,
step: 0.1,
precision: 1
}
};
//Slider config with callbacks
$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;
}
}
......@@ -113,12 +144,32 @@ app.controller('MainCtrl', function ($scope, $rootScope, $timeout, $modal) {
options: {
floor: 0,
ceil: 500,
translate: function (value) {
translate: function(value) {
return '$' + value;
}
}
};
//Slider config with custom display function using html formatting
$scope.slider_translate_html = {
minValue: 100,
maxValue: 400,
options: {
floor: 0,
ceil: 500,
translate: function(value, sliderId, label) {
switch (label) {
case 'model':
return '<b>Min price:</b> $' + value;
case 'high':
return '<b>Max price:</b> $' + value;
default:
return '$' + value
}
}
}
};
//Slider config with steps array of letters
$scope.slider_alphabet = {
value: 0,
......@@ -144,7 +195,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;
}
}
......@@ -157,7 +208,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;
}
}
......@@ -250,7 +301,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;
}
}
......@@ -285,9 +336,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');
});
};
......@@ -302,14 +353,14 @@ 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 + '%';
};
......@@ -324,23 +375,23 @@ 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.
});
};
......@@ -355,8 +406,8 @@ app.controller('MainCtrl', function ($scope, $rootScope, $timeout, $modal) {
value: 200
}
};
$scope.refreshSlider = function () {
$timeout(function () {
$scope.refreshSlider = function() {
$timeout(function() {
$scope.$broadcast('rzSliderForceRender');
});
};
......@@ -379,7 +430,7 @@ app.controller('MainCtrl', function ($scope, $rootScope, $timeout, $modal) {
showTicksValues: 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 @ 66430654
......@@ -90,6 +90,24 @@
<show-code js-file="slider_visible_bar" html-file="singleSlider"></show-code>
</article>
<article>
<h2>Slider with visible selection bar at the end</h2>
<rzslider
rz-slider-model="slider_visible_bar_end.value"
rz-slider-options="slider_visible_bar_end.options"
></rzslider>
<show-code js-file="slider_visible_bar_end" html-file="singleSlider"></show-code>
</article>
<article>
<h2>Slider with visible selection bar from a value</h2>
<rzslider
rz-slider-model="slider_visible_bar_from_value.value"
rz-slider-options="slider_visible_bar_from_value.options"
></rzslider>
<show-code js-file="slider_visible_bar_from_value" html-file="singleSlider"></show-code>
</article>
<article>
<h2>Slider with dynamic selection bar colors</h2>
<rzslider
......@@ -108,6 +126,15 @@
<show-code js-file="slider_floor_ceil" html-file="singleSlider"></show-code>
</article>
<article>
<h2>Slider with floating values</h2>
<rzslider
rz-slider-model="slider_float.value"
rz-slider-options="slider_float.options"
></rzslider>
<show-code js-file="slider_float" html-file="singleSlider"></show-code>
</article>
<article>
<h2>Slider with callbacks on start, change and end</h2>
<p>Value linked on start: {{ otherData.start }}</p>
......@@ -131,6 +158,16 @@
<show-code js-file="slider_translate" html-file="rangeSlider"></show-code>
</article>
<article>
<h2>Slider with custom display function using html formatting</h2>
<rzslider
rz-slider-model="slider_translate_html.minValue"
rz-slider-high="slider_translate_html.maxValue"
rz-slider-options="slider_translate_html.options"
></rzslider>
<show-code js-file="slider_translate_html" html-file="rangeSlider"></show-code>
</article>
<article>
<h2>Slider with Alphabet</h2>
<rzslider
......@@ -270,13 +307,13 @@
<tabset class="code">
<tab heading="HTML">
<div hljs hljs-include="'snippets/slider_modal.html'" hljs-language="html"></div>
<div hljs hljs-include="'snippets/slider_modal.html'" hljs-language="html"></div>
</tab>
<tab heading="JS">
<div hljs hljs-include="'snippets/slider_modal.js'" hljs-language="js"></div>
<div hljs hljs-include="'snippets/slider_modal.js'" hljs-language="js"></div>
</tab>
<tab heading="sliderModal.html">
<div hljs hljs-include="'sliderModal.html'" hljs-language="html"></div>
<div hljs hljs-include="'sliderModal.html'" hljs-language="html"></div>
</tab>
</tabset>
</article>
......@@ -340,6 +377,6 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>
<script src="lib/highlight.min.js"></script>
<script src="lib/angular-highlightjs.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.js"></script>
<script src="demo.js"></script>
</html>
snippets/slider_float.js 0 → 100644
View file @ 66430654
$scope.slider = {
value: 0.5,
options: {
floor: 0,
ceil: 2,
step: 0.1,
precision: 1
}
};
snippets/slider_translate_html.js 0 → 100644
View file @ 66430654
$scope.slider = {
minValue: 100,
maxValue: 400,
options: {
floor: 0,
ceil: 500,
translate: function(value, sliderId, label) {
switch (label) {
case 'model':
return '<b>Min price:</b> $' + value;
case 'high':
return '<b>Max price:</b> $' + value;
default:
return '$' + value
}
}
}
};
snippets/slider_visible_bar_end.js 0 → 100644
View file @ 66430654
$scope.slider = {
value: 5,
options: {
floor: 0,
ceil: 10,
showSelectionBarEnd: true
}
};
snippets/slider_visible_bar_from_value.js 0 → 100644
View file @ 66430654
$scope.slider = {
value: 5,
options: {
floor: -10,
ceil: 10,
showSelectionBarFromValue: 0
}
};
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