Skip to content

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

Add code snippets for all examples 

Closes #227
parent 10998a67
Expand all Show whitespace changes
Inline Side-by-side
Showing with 783 additions and 2267 deletions
.editorconfig 0 → 100644
View file @ 8ebe42ce
# http://editorconfig.org
root = true
[*]
indent_style = space
indent_size = 2
charset = utf-8
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true
[*.js]
quote_type = single
curly_bracket_next_line = true
indent_brace_style = Allman
spaces_around_operators = true
spaces_around_brackets = inside
continuation_indent_size = 2
demo.css
View file @ 8ebe42ce
...@@ -10,6 +10,11 @@ body { ...@@ -10,6 +10,11 @@ body {
padding-bottom: 40px; padding-bottom: 40px;
} }
.code {
margin-top: 5px;
}
header { header {
background: #0db9f0; background: #0db9f0;
color: #fff; color: #fff;
......
demo.js
View file @ 8ebe42ce
var app = angular.module('rzSliderDemo', ['rzModule', 'ui.bootstrap']); var app = angular.module('rzSliderDemo', ['rzModule', 'ui.bootstrap', 'hljs']);
app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) { app.directive('showCode', function () {
return {
scope: {
jsFile: '@',
htmlFile: '@'
},
templateUrl: 'show-code.html'
};
});
app.controller('MainCtrl', function ($scope, $rootScope, $timeout, $modal) {
//Minimal slider config //Minimal slider config
$scope.minSlider = { $scope.minSlider = {
value: 10 value: 10
}; };
//Slider with selection bar
$scope.slider_visible_bar = {
value: 10,
options: {
showSelectionBar: true
}
};
//Range slider config //Range slider config
$scope.minRangeSlider = { $scope.minRangeSlider = {
minValue: 10, minValue: 10,
...@@ -25,12 +27,20 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) { ...@@ -25,12 +27,20 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
} }
}; };
//Slider with selection bar
$scope.slider_visible_bar = {
value: 10,
options: {
showSelectionBar: true
}
};
//Slider with selection bar //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)
...@@ -56,13 +66,13 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) { ...@@ -56,13 +66,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;
} }
} }
...@@ -78,9 +88,9 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) { ...@@ -78,9 +88,9 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
minValue: 100, minValue: 100,
maxValue: 400, maxValue: 400,
options: { options: {
ceil: 500,
floor: 0, floor: 0,
translate: function(value) { ceil: 500,
translate: function (value) {
return '$' + value; return '$' + value;
} }
} }
...@@ -98,8 +108,8 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) { ...@@ -98,8 +108,8 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
$scope.slider_ticks = { $scope.slider_ticks = {
value: 5, value: 5,
options: { options: {
ceil: 10,
floor: 0, floor: 0,
ceil: 10,
showTicks: true showTicks: true
} }
}; };
...@@ -108,10 +118,10 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) { ...@@ -108,10 +118,10 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
$scope.slider_ticks_tooltip = { $scope.slider_ticks_tooltip = {
value: 5, value: 5,
options: { options: {
ceil: 10,
floor: 0, floor: 0,
ceil: 10,
showTicks: true, showTicks: true,
ticksTooltip: function(v) { ticksTooltip: function (v) {
return 'Tooltip for ' + v; return 'Tooltip for ' + v;
} }
} }
...@@ -121,10 +131,10 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) { ...@@ -121,10 +131,10 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
$scope.slider_ticks_values = { $scope.slider_ticks_values = {
value: 5, value: 5,
options: { options: {
ceil: 10,
floor: 0, floor: 0,
ceil: 10,
showTicksValues: true, showTicksValues: true,
ticksValuesTooltip: function(v) { ticksValuesTooltip: function (v) {
return 'Tooltip for ' + v; return 'Tooltip for ' + v;
} }
} }
...@@ -135,8 +145,8 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) { ...@@ -135,8 +145,8 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
minValue: 1, minValue: 1,
maxValue: 8, maxValue: 8,
options: { options: {
ceil: 10,
floor: 0, floor: 0,
ceil: 10,
showTicksValues: true showTicksValues: true
} }
}; };
...@@ -146,8 +156,8 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) { ...@@ -146,8 +156,8 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
minValue: 1, minValue: 1,
maxValue: 8, maxValue: 8,
options: { options: {
ceil: 10,
floor: 0, floor: 0,
ceil: 10,
draggableRange: true draggableRange: true
} }
}; };
...@@ -157,8 +167,8 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) { ...@@ -157,8 +167,8 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
minValue: 4, minValue: 4,
maxValue: 6, maxValue: 6,
options: { options: {
ceil: 10,
floor: 0, floor: 0,
ceil: 10,
draggableRangeOnly: true draggableRangeOnly: true
} }
}; };
...@@ -217,7 +227,7 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) { ...@@ -217,7 +227,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;
} }
} }
...@@ -227,8 +237,8 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) { ...@@ -227,8 +237,8 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
$scope.read_only_slider = { $scope.read_only_slider = {
value: 50, value: 50,
options: { options: {
ceil: 100,
floor: 0, floor: 0,
ceil: 100,
readOnly: true readOnly: true
} }
}; };
...@@ -237,8 +247,8 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) { ...@@ -237,8 +247,8 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
$scope.disabled_slider = { $scope.disabled_slider = {
value: 50, value: 50,
options: { options: {
ceil: 100,
floor: 0, floor: 0,
ceil: 100,
disabled: true disabled: true
} }
}; };
...@@ -248,13 +258,13 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) { ...@@ -248,13 +258,13 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
$scope.slider_toggle = { $scope.slider_toggle = {
value: 5, value: 5,
options: { options: {
ceil: 10, floor: 0,
floor: 0 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');
}); });
}; };
...@@ -269,14 +279,14 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) { ...@@ -269,14 +279,14 @@ 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 + '%';
}; };
...@@ -291,23 +301,23 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) { ...@@ -291,23 +301,23 @@ 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.
}); });
}; };
...@@ -322,8 +332,8 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) { ...@@ -322,8 +332,8 @@ 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');
}); });
}; };
...@@ -346,7 +356,7 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) { ...@@ -346,7 +356,7 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
showTicksValues: false showTicksValues: 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 {
......
dist/rzslider.css deleted 100644 → 0
View file @ 10998a67
/*! angularjs-slider - v2.4.1 -
(c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> -
https://github.com/angular-slider/angularjs-slider -
2016-01-15 */
rzslider {
position: relative;
display: inline-block;
width: 100%;
height: 4px;
margin: 35px 0 15px 0;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
rzslider[disabled] {
cursor: not-allowed;
}
rzslider[disabled] .rz-pointer {
cursor: not-allowed;
background-color: #d8e0f3;
}
rzslider span {
position: absolute;
display: inline-block;
white-space: nowrap;
}
rzslider .rz-base {
width: 100%;
height: 100%;
padding: 0;
}
rzslider .rz-bar-wrapper {
left: 0;
z-index: 1;
width: 100%;
height: 32px;
padding-top: 16px;
margin-top: -16px;
box-sizing: border-box;
}
rzslider .rz-bar-wrapper.rz-draggable {
cursor: move;
}
rzslider .rz-bar {
left: 0;
z-index: 1;
width: 100%;
height: 4px;
background: #d8e0f3;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
rzslider .rz-bar.rz-selection {
z-index: 2;
background: #0db9f0;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
rzslider .rz-pointer {
top: -14px;
z-index: 3;
width: 32px;
height: 32px;
cursor: pointer;
background-color: #0db9f0;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
}
rzslider .rz-pointer:after {
position: absolute;
top: 12px;
left: 12px;
width: 8px;
height: 8px;
background: #ffffff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
content: '';
}
rzslider .rz-pointer:hover:after {
background-color: #ffffff;
}
rzslider .rz-pointer.rz-active:after {
background-color: #451aff;
}
rzslider .rz-bubble {
bottom: 16px;
padding: 1px 3px;
color: #55637d;
cursor: default;
}
rzslider .rz-bubble.rz-selection {
top: 16px;
}
rzslider .rz-bubble.rz-limit {
color: #55637d;
}
rzslider .rz-ticks {
position: absolute;
top: -3px;
left: 0;
z-index: 1;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
height: 0;
padding: 0 11px;
margin: 0;
list-style: none;
box-sizing: border-box;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
rzslider .rz-ticks .tick {
width: 10px;
height: 10px;
text-align: center;
cursor: pointer;
background: #d8e0f3;
border-radius: 50%;
}
rzslider .rz-ticks .tick.selected {
background: #0db9f0;
}
rzslider .rz-ticks .tick .tick-value {
position: absolute;
top: -30px;
transform: translate(-50%, 0);
}
rzslider.vertical {
position: relative;
width: 4px;
height: 100%;
padding: 0;
margin: 0 20px;
vertical-align: baseline;
}
rzslider.vertical .rz-base {
width: 100%;
height: 100%;
padding: 0;
}
rzslider.vertical .rz-bar-wrapper {
top: auto;
left: 0;
width: 32px;
height: 100%;
padding: 0 0 0 16px;
margin: 0 0 0 -16px;
}
rzslider.vertical .rz-bar {
bottom: 0;
left: auto;
width: 4px;
height: 100%;
}
rzslider.vertical .rz-pointer {
top: auto;
bottom: 0;
left: -14px !important;
}
rzslider.vertical .rz-bubble {
bottom: 0;
left: 16px !important;
margin-left: 3px;
}
rzslider.vertical .rz-bubble.rz-selection {
top: auto;
left: 16px !important;
}
rzslider.vertical .rz-ticks {
top: 0;
left: -3px;
z-index: 1;
width: 0;
height: 100%;
padding: 11px 0;
-webkit-flex-direction: column-reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
rzslider.vertical .rz-ticks .tick {
vertical-align: middle;
}
rzslider.vertical .rz-ticks .tick .tick-value {
top: auto;
right: -30px;
transform: translate(0, -28%);
}
\ No newline at end of file
dist/rzslider.js deleted 100644 → 0
View file @ 10998a67
This diff is collapsed.
index.html
View file @ 8ebe42ce
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
<!-- 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">
<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 rel="stylesheet" href="lib/highlightjs-default.css"/>
<link rel="stylesheet" href="demo.css"/> <link rel="stylesheet" href="demo.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'>
</head> </head>
...@@ -44,6 +45,7 @@ ...@@ -44,6 +45,7 @@
<h2>Simple slider</h2> <h2>Simple slider</h2>
Model: <input type="number" ng-model="minSlider.value"/><br/> Model: <input type="number" ng-model="minSlider.value"/><br/>
<rzslider rz-slider-model="minSlider.value"></rzslider> <rzslider rz-slider-model="minSlider.value"></rzslider>
<show-code js-file="minSlider" html-file="minSlider"></show-code>
</article> </article>
<article> <article>
...@@ -55,6 +57,7 @@ ...@@ -55,6 +57,7 @@
rz-slider-high="minRangeSlider.maxValue" rz-slider-high="minRangeSlider.maxValue"
rz-slider-options="minRangeSlider.options" rz-slider-options="minRangeSlider.options"
></rzslider> ></rzslider>
<show-code js-file="minRangeSlider" html-file="rangeSlider"></show-code>
</article> </article>
<article> <article>
...@@ -63,6 +66,7 @@ ...@@ -63,6 +66,7 @@
rz-slider-model="slider_visible_bar.value" rz-slider-model="slider_visible_bar.value"
rz-slider-options="slider_visible_bar.options" rz-slider-options="slider_visible_bar.options"
></rzslider> ></rzslider>
<show-code js-file="slider_visible_bar" html-file="singleSlider"></show-code>
</article> </article>
<article> <article>
...@@ -71,6 +75,7 @@ ...@@ -71,6 +75,7 @@
rz-slider-model="color_slider_bar.value" rz-slider-model="color_slider_bar.value"
rz-slider-options="color_slider_bar.options" rz-slider-options="color_slider_bar.options"
></rzslider> ></rzslider>
<show-code js-file="color_slider_bar" html-file="singleSlider"></show-code>
</article> </article>
<article> <article>
...@@ -79,6 +84,7 @@ ...@@ -79,6 +84,7 @@
rz-slider-model="slider_floor_ceil.value" rz-slider-model="slider_floor_ceil.value"
rz-slider-options="slider_floor_ceil.options" rz-slider-options="slider_floor_ceil.options"
></rzslider> ></rzslider>
<show-code js-file="slider_floor_ceil" html-file="singleSlider"></show-code>
</article> </article>
<article> <article>
...@@ -91,6 +97,7 @@ ...@@ -91,6 +97,7 @@
rz-slider-model="slider_callbacks.value" rz-slider-model="slider_callbacks.value"
rz-slider-options="slider_callbacks.options" rz-slider-options="slider_callbacks.options"
></rzslider> ></rzslider>
<show-code js-file="slider_callbacks" html-file="singleSlider"></show-code>
</article> </article>
<article> <article>
...@@ -100,6 +107,7 @@ ...@@ -100,6 +107,7 @@
rz-slider-high="slider_translate.maxValue" rz-slider-high="slider_translate.maxValue"
rz-slider-options="slider_translate.options" rz-slider-options="slider_translate.options"
></rzslider> ></rzslider>
<show-code js-file="slider_translate" html-file="rangeSlider"></show-code>
</article> </article>
<article> <article>
...@@ -108,6 +116,7 @@ ...@@ -108,6 +116,7 @@
rz-slider-model="slider_alphabet.value" rz-slider-model="slider_alphabet.value"
rz-slider-options="slider_alphabet.options" rz-slider-options="slider_alphabet.options"
></rzslider> ></rzslider>
<show-code js-file="slider_alphabet" html-file="singleSlider"></show-code>
</article> </article>
<article> <article>
...@@ -116,6 +125,7 @@ ...@@ -116,6 +125,7 @@
rz-slider-model="slider_ticks.value" rz-slider-model="slider_ticks.value"
rz-slider-options="slider_ticks.options" rz-slider-options="slider_ticks.options"
></rzslider> ></rzslider>
<show-code js-file="slider_ticks" html-file="singleSlider"></show-code>
</article> </article>
<article> <article>
...@@ -124,6 +134,7 @@ ...@@ -124,6 +134,7 @@
rz-slider-model="slider_ticks_tooltip.value" rz-slider-model="slider_ticks_tooltip.value"
rz-slider-options="slider_ticks_tooltip.options" rz-slider-options="slider_ticks_tooltip.options"
></rzslider> ></rzslider>
<show-code js-file="slider_ticks_tooltip" html-file="singleSlider"></show-code>
</article> </article>
<article> <article>
...@@ -132,6 +143,7 @@ ...@@ -132,6 +143,7 @@
rz-slider-model="slider_ticks_values.value" rz-slider-model="slider_ticks_values.value"
rz-slider-options="slider_ticks_values.options" rz-slider-options="slider_ticks_values.options"
></rzslider> ></rzslider>
<show-code js-file="slider_ticks_values" html-file="singleSlider"></show-code>
</article> </article>
<article> <article>
...@@ -141,6 +153,7 @@ ...@@ -141,6 +153,7 @@
rz-slider-high="range_slider_ticks_values.maxValue" rz-slider-high="range_slider_ticks_values.maxValue"
rz-slider-options="range_slider_ticks_values.options" rz-slider-options="range_slider_ticks_values.options"
></rzslider> ></rzslider>
<show-code js-file="range_slider_ticks_values" html-file="rangeSlider"></show-code>
</article> </article>
<article> <article>
...@@ -150,6 +163,7 @@ ...@@ -150,6 +163,7 @@
rz-slider-high="slider_draggable_range.maxValue" rz-slider-high="slider_draggable_range.maxValue"
rz-slider-options="slider_draggable_range.options" rz-slider-options="slider_draggable_range.options"
></rzslider> ></rzslider>
<show-code js-file="slider_draggable_range" html-file="rangeSlider"></show-code>
</article> </article>
<article> <article>
...@@ -159,6 +173,7 @@ ...@@ -159,6 +173,7 @@
rz-slider-high="slider_draggable_range_only.maxValue" rz-slider-high="slider_draggable_range_only.maxValue"
rz-slider-options="slider_draggable_range_only.options" rz-slider-options="slider_draggable_range_only.options"
></rzslider> ></rzslider>
<show-code js-file="slider_draggable_range_only" html-file="rangeSlider"></show-code>
</article> </article>
<article> <article>
...@@ -189,6 +204,7 @@ ...@@ -189,6 +204,7 @@
rz-slider-options="verticalSlider6.options"></rzslider> rz-slider-options="verticalSlider6.options"></rzslider>
</div> </div>
</div> </div>
<show-code js-file="vertical_sliders" html-file="vertical_sliders"></show-code>
</article> </article>
<article> <article>
...@@ -198,6 +214,7 @@ ...@@ -198,6 +214,7 @@
rz-slider-model="disabled_slider.value" rz-slider-model="disabled_slider.value"
rz-slider-options="disabled_slider.options" rz-slider-options="disabled_slider.options"
></rzslider> ></rzslider>
<show-code js-file="disabled_slider" html-file="disabled_slider"></show-code>
</article> </article>
<article> <article>
...@@ -207,6 +224,7 @@ ...@@ -207,6 +224,7 @@
rz-slider-model="read_only_slider.value" rz-slider-model="read_only_slider.value"
rz-slider-options="read_only_slider.options" rz-slider-options="read_only_slider.options"
></rzslider> ></rzslider>
<show-code js-file="read_only_slider" html-file="read_only_slider"></show-code>
</article> </article>
<article> <article>
...@@ -218,6 +236,7 @@ ...@@ -218,6 +236,7 @@
rz-slider-model="slider_toggle.value" rz-slider-model="slider_toggle.value"
rz-slider-options="slider_toggle.options"></rzslider> rz-slider-options="slider_toggle.options"></rzslider>
</div> </div>
<show-code js-file="slider_toggle" html-file="slider_toggle"></show-code>
</article> </article>
<article> <article>
...@@ -227,6 +246,18 @@ ...@@ -227,6 +246,18 @@
Range slider values: {{percentages.range.low}}% and {{percentages.range.high}}% Range slider values: {{percentages.range.low}}% and {{percentages.range.high}}%
</br> </br>
<button type="button" ng-click="openModal()" class="btn btn-default btn-lg">Open Modal!</button> <button type="button" ng-click="openModal()" class="btn btn-default btn-lg">Open Modal!</button>
<tabset class="code">
<tab heading="HTML">
<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>
</tab>
<tab heading="sliderModal.html">
<div hljs hljs-include="'sliderModal.html'" hljs-language="html"></div>
</tab>
</tabset>
</article> </article>
<article> <article>
...@@ -241,6 +272,7 @@ ...@@ -241,6 +272,7 @@
<rzslider rz-slider-model="tabSliders.slider2.value"></rzslider> <rzslider rz-slider-model="tabSliders.slider2.value"></rzslider>
</tab> </tab>
</tabset> </tabset>
<show-code js-file="tabSliders" html-file="tabSliders"></show-code>
</article> </article>
<article> <article>
...@@ -283,8 +315,10 @@ ...@@ -283,8 +315,10 @@
</div> </div>
</body> </body>
<script src="angular.min.js"></script> <script src="lib/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script> <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.min.js"></script>
<script src="demo.js"></script> <script src="demo.js"></script>
</html> </html>
index2.html deleted 100644 → 0
View file @ 10998a67
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<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="rzslider.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>
</head>
<body ng-controller="MainCtrl">
<div class="wrapper">
<header>
<h1>AngularJS Touch Slider</h1>
</header>
<article>
<h2>Min/max slider example</h2>
<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>
<h2>Currency slider example</h2>
<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>
<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>
<rzslider
rz-slider-floor="0"
rz-slider-ceil="letterMax"
rz-slider-model="letter"
rz-slider-translate="alphabetTranslate"></rzslider>
</article>
</div>
</body>
<script src="angular.min.js"></script>
<script src="rzslider.js"></script>
<script>
var app = angular.module('plunker', ['rzModule']);
app.controller('MainCtrl', function($scope)
{
$scope.priceSlider = {
min: 100,
max: 400,
ceil: 501,
floor: 0
};
$scope.priceSlider2 = 150;
$scope.priceSlider3 = 250;
$scope.translate = function(value)
{
return '$' + value;
};
var alphabetArray = 'abcdefghijklmnopqrstuvwxyz'.split('');
$scope.letter = 5;
$scope.letterMax = alphabetArray.length - 1;
$scope.alphabetTranslate = function(value)
{
return alphabetArray[value].toUpperCase();
};
});
</script>
</html>
lib/angular-highlightjs.min.js 0 → 100644
View file @ 8ebe42ce
/*! angular-highlightjs
version: 0.5.1
build date: 2015-11-08
author: Chih-Hsuan Fan
https://github.com/pc035860/angular-highlightjs.git */
!function(a,b){"object"==typeof exports||"object"==typeof module&&module.exports?module.exports=b(require("angular"),require("highlight.js")):"function"==typeof define&&define.amd?define(["angular","hljs"],b):a.returnExports=b(a.angular,a.hljs)}(this,function(a,b){function c(b){var c=!0;return a.forEach(["source","include"],function(a){b[a]&&(c=!1)}),c}var d=a.module("hljs",[]);d.provider("hljsService",function(){var c={};return{setOptions:function(b){a.extend(c,b)},getOptions:function(){return a.copy(c)},$get:function(){return(b.configure||a.noop)(c),b}}}),d.factory("hljsCache",["$cacheFactory",function(a){return a("hljsCache")}]),d.controller("HljsCtrl",["hljsCache","hljsService","$interpolate","$window","$log",function(b,c,d,e,f){function g(a,b,c){var d;return function(){var f=this,g=arguments,h=function(){d=null,c||a.apply(f,g)},i=c&&!d;e.clearTimeout(d),d=e.setTimeout(h,b),i&&a.apply(f,g)}}function h(a,b){var c=b?"\\\\$&":"\\$&";return a.replace(/[-[\]{}()*+?.,\\^$|#\s]/g,c)}function i(a){for(var b,c=[],d=new RegExp(r,"g"),e="",f=0;null!==(b=d.exec(a));)e+=a.substring(f,b.index)+s,f=b.index+b[0].length,c.push(b[0]);return e+=a.substr(f),{code:e,tokens:c}}function j(a,b){for(var c,d=new RegExp(s,"g"),e="",f=0;null!==(c=d.exec(a));)e+=a.substring(f,c.index)+b.shift(),f=c.index+c[0].length;return e+=a.substr(f)}var k=this,l=null,m=null,n=null,o=!1,p=null,q=null,r=h(d.startSymbol())+"((.|\\s)+?)"+h(d.endSymbol()),s="∫";k.init=function(a){l=a},k.setInterpolateScope=function(a){o=a,n&&k.highlight(n)},k.setLanguage=function(a){m=a,n&&k.highlight(n)},k.highlightCallback=function(a){q=a},k._highlight=function(e){if(l){var f,g,h;if(n=e,o&&(h=i(e),e=h.code),m?(g=k._cacheKey(m,!!o,e),f=b.get(g),f||(f=c.highlight(m,c.fixMarkup(e),!0),b.put(g,f))):(g=k._cacheKey(!!o,e),f=b.get(g),f||(f=c.highlightAuto(c.fixMarkup(e)),b.put(g,f))),e=f.value,o){(p||a.noop)(),h&&(e=j(e,h.tokens));var r=d(e);p=o.$watch(r,function(a,b){a!==b&&l.html(a)}),l.html(r(o))}else l.html(e);l.addClass(f.language),null!==q&&a.isFunction(q)&&q()}},k.highlight=g(k._highlight,17),k.clear=function(){l&&(n=null,l.text(""))},k.release=function(){l=null,o=null,(p||a.noop)(),p=null},k._cacheKey=function(){var a=Array.prototype.slice.call(arguments),b="!angular-highlightjs!";return a.join(b)}}]);var e,f,g,h,i;return e=["$parse",function(b){return{restrict:"EA",controller:"HljsCtrl",compile:function(d,e,f){var g=d[0].innerHTML.replace(/^(\r\n|\r|\n)/m,""),h=d[0].textContent.replace(/^(\r\n|\r|\n)/m,"");return d.html('<pre><code class="hljs"></code></pre>'),function(d,e,f,i){var j;if(a.isDefined(f.escape)?j=b(f.escape):a.isDefined(f.noEscape)&&(j=b("false")),i.init(e.find("code")),f.onhighlight&&i.highlightCallback(function(){d.$eval(f.onhighlight)}),(g||h)&&c(f)){var k;k=j&&!j(d)?h:g,i.highlight(k)}d.$on("$destroy",function(){i.release()})}}}}],g=function(b){return function(){return{require:"?hljs",restrict:"A",link:function(c,d,e,f){f&&e.$observe(b,function(b){a.isDefined(b)&&f.setLanguage(b)})}}}},f=function(a){return function(){return{require:"?hljs",restrict:"A",link:function(b,c,d,e){e&&b.$watch(d[a],function(a,c){(a||a!==c)&&e.setInterpolateScope(a?b:null)})}}}},h=function(a){return function(){return{require:"?hljs",restrict:"A",link:function(b,c,d,e){e&&b.$watch(d[a],function(a,b){a?e.highlight(a):e.clear()})}}}},i=function(b){return["$http","$templateCache","$q",function(c,d,e){return{require:"?hljs",restrict:"A",compile:function(f,g,h){var i=g[b];return function(b,f,g,h){var j=0;h&&b.$watch(i,function(b){var f=++j;if(b&&a.isString(b)){var g,i;g=d.get(b),g||(i=e.defer(),c.get(b,{cache:d,transformResponse:function(a,b){return a}}).success(function(a){f===j&&i.resolve(a)}).error(function(){f===j&&h.clear(),i.resolve()}),g=i.promise),e.when(g).then(function(b){b&&(a.isArray(b)?b=b[1]:a.isObject(b)&&(b=b.data),b=b.replace(/^(\r\n|\r|\n)/m,""),h.highlight(b))})}else h.clear()})}}}}]},function(b){b.directive("hljs",e),a.forEach(["interpolate","hljsInterpolate","compile","hljsCompile"],function(a){b.directive(a,f(a))}),a.forEach(["language","hljsLanguage"],function(a){b.directive(a,g(a))}),a.forEach(["source","hljsSource"],function(a){b.directive(a,h(a))}),a.forEach(["include","hljsInclude"],function(a){b.directive(a,i(a))})}(d),"hljs"});
\ No newline at end of file
lib/highlight.min.js 0 → 100644
View file @ 8ebe42ce
This diff is collapsed.
lib/highlightjs-default.css 0 → 100644
View file @ 8ebe42ce
/*
Original highlight.js style (c) Ivan Sagalaev <maniac@softwaremaniacs.org>
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #F0F0F0;
}
.hljs,
.hljs-subst {
color: #444;
}
.hljs-keyword,
.hljs-attribute,
.hljs-selector-tag,
.hljs-meta-keyword,
.hljs-doctag,
.hljs-name {
font-weight: bold;
}
.hljs-built_in,
.hljs-literal,
.hljs-bullet,
.hljs-code,
.hljs-addition {
color: #1F811F;
}
.hljs-regexp,
.hljs-symbol,
.hljs-variable,
.hljs-template-variable,
.hljs-link,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #BC6060;
}
.hljs-type,
.hljs-string,
.hljs-number,
.hljs-selector-id,
.hljs-selector-class,
.hljs-quote,
.hljs-template-tag,
.hljs-deletion {
color: #880000;
}
.hljs-title,
.hljs-section {
color: #880000;
font-weight: bold;
}
.hljs-comment {
color: #888888;
}
.hljs-meta {
color: #2B6EA1;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
rzSliderTpl.html deleted 100644 → 0
View file @ 10998a67
<span class="rz-bar"></span> <!-- 0 The slider bar -->
<span class="rz-bar rz-selection"></span> <!-- 1 Highlight between two handles -->
<span class="rz-pointer"></span> <!-- 2 Left slider handle -->
<span class="rz-pointer"></span> <!-- 3 Right slider handle -->
<span class="rz-bubble rz-limit"></span> <!-- 4 Floor label -->
<span class="rz-bubble rz-limit"></span> <!-- 5 Ceiling label -->
<span class="rz-bubble"></span> <!-- 6 Label above left slider handle -->
<span class="rz-bubble"></span> <!-- 7 Label above right slider handle -->
<span class="rz-bubble"></span>
\ No newline at end of file
show-code.html 0 → 100644
View file @ 8ebe42ce
<tabset class="code">
<tab heading="HTML">
<div hljs hljs-include="'snippets/'+ htmlFile + '.html'" hljs-language="html"></div>
</tab>
<tab heading="JS">
<div hljs hljs-include="'snippets/'+ jsFile + '.js'" hljs-language="js"></div>
</tab>
</tabset>
\ No newline at end of file
snippets/color_slider_bar.js 0 → 100644
View file @ 8ebe42ce
$scope.slider = {
value: 12,
options: {
showSelectionBar: true,
getSelectionBarColor: function(value) {
if (value <= 3)
return 'red';
if (value <= 6)
return 'orange';
if (value <= 9)
return 'yellow';
return '#2AE02A';
}
}
};
\ No newline at end of file
snippets/disabled_slider.html 0 → 100644
View file @ 8ebe42ce
<label>Disabled <input type="checkbox" ng-model="slider.options.disabled"></label>
<rzslider rz-slider-model="slider.value"
rz-slider-options="slider.options"></rzslider>
snippets/disabled_slider.js 0 → 100644
View file @ 8ebe42ce
$scope.slider = {
value: 50,
options: {
floor: 0,
ceil: 100,
disabled: true
}
};
snippets/minRangeSlider.js 0 → 100644
View file @ 8ebe42ce
$scope.slider = {
minValue: 10,
maxValue: 90,
options: {
floor: 0,
ceil: 100,
step: 1
}
};
\ No newline at end of file
snippets/minSlider.html 0 → 100644
View file @ 8ebe42ce
<rzslider rz-slider-model="slider.value"></rzslider>
\ No newline at end of file
snippets/minSlider.js 0 → 100644
View file @ 8ebe42ce
$scope.slider = {
value: 10
};
\ No newline at end of file
snippets/rangeSlider.html 0 → 100644
View file @ 8ebe42ce
<rzslider rz-slider-model="slider.minValue"
rz-slider-high="slider.maxValue"
rz-slider-options="slider.options"></rzslider>
\ No newline at end of file
snippets/range_slider_ticks_values.js 0 → 100644
View file @ 8ebe42ce
$scope.slider = {
minValue: 1,
maxValue: 8,
options: {
floor: 0,
ceil: 10,
showTicksValues: true
}
};
snippets/read_only_slider.html 0 → 100644
View file @ 8ebe42ce
<label>Read-only <input type="checkbox" ng-model="slider.options.readOnly"></label>
<rzslider rz-slider-model="slider.value"
rz-slider-options="slider.options"></rzslider>
snippets/read_only_slider.js 0 → 100644
View file @ 8ebe42ce
$scope.slider = {
value: 50,
options: {
floor: 0,
ceil: 100,
readOnly: true
}
};
snippets/singleSlider.html 0 → 100644
View file @ 8ebe42ce
<rzslider rz-slider-model="slider.value"
rz-slider-options="slider.options"></rzslider>
\ No newline at end of file
snippets/slider_alphabet.js 0 → 100644
View file @ 8ebe42ce
$scope.slider = {
value: 0,
options: {
stepsArray: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('') // equals to ['A', 'B', ... 'Z']
}
};
snippets/slider_callbacks.js 0 → 100644
View file @ 8ebe42ce
$scope.slider = {
value: 100,
options: {
id: 'slider-id',
onStart: function(id) {
console.log('on start ' + id); // logs 'on start slider-id'
},
onChange: function(id) {
console.log('on change ' + id); // logs 'on change slider-id'
},
onEnd: function(id) {
console.log('on end ' + id); // logs 'on end slider-id'
}
}
};
snippets/slider_draggable_range.js 0 → 100644
View file @ 8ebe42ce
$scope.slider = {
minValue: 1,
maxValue: 8,
options: {
floor: 0,
ceil: 10,
draggableRange: true
}
};
snippets/slider_draggable_range_only.js 0 → 100644
View file @ 8ebe42ce
$scope.slider = {
minValue: 4,
maxValue: 6,
options: {
floor: 0,
ceil: 10,
draggableRangeOnly: true
}
};
snippets/slider_floor_ceil.js 0 → 100644
View file @ 8ebe42ce
$scope.slider = {
value: 12,
options: {
floor: 10,
ceil: 100,
step: 5
}
};
\ No newline at end of file
snippets/slider_modal.html 0 → 100644
View file @ 8ebe42ce
<button type="button" ng-click="openModal()" class="btn btn-default btn-lg">Open Modal!</button>
snippets/slider_modal.js 0 → 100644
View file @ 8ebe42ce
$scope.percentages = {
normal: {
low: 15
},
range: {
low: 10,
high: 50
}
};
$scope.openModal = function () {
var modalInstance = $modal.open({
templateUrl: 'slider_modal.html',
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) {
return value + '%';
};
$scope.percentages.normal.options = {
floor: 0,
ceil: 100,
translate: formatToPercentage,
showSelectionBar: true
};
$scope.percentages.range.options = {
floor: 0,
ceil: 100,
translate: formatToPercentage
};
$scope.ok = function () {
$modalInstance.close($scope.percentages);
};
$scope.cancel = function () {
$modalInstance.dismiss();
};
},
resolve: {
values: function () {
return $scope.percentages;
}
}
});
modalInstance.result.then(function (percentages) {
$scope.percentages = percentages;
});
modalInstance.rendered.then(function () {
$rootScope.$broadcast('rzSliderForceRender'); //Force refresh sliders on render. Otherwise bullets are aligned at left side.
});
};
snippets/slider_ticks.js 0 → 100644
View file @ 8ebe42ce
$scope.slider = {
value: 5,
options: {
floor: 0,
ceil: 10,
showTicks: true
}
};
snippets/slider_ticks_tooltip.js 0 → 100644
View file @ 8ebe42ce
$scope.slider = { //requires angular-bootstrap to display tooltips
value: 5,
options: {
floor: 0,
ceil: 10,
showTicks: true,
ticksTooltip: function(v) {
return 'Tooltip for ' + v;
}
}
};
snippets/slider_ticks_values.js 0 → 100644
View file @ 8ebe42ce
$scope.slider = { //requires angular-bootstrap to display tooltips
value: 5,
options: {
floor: 0,
ceil: 10,
showTicksValues: true,
ticksValuesTooltip: function(v) {
return 'Tooltip for ' + v;
}
}
};
snippets/slider_toggle.html 0 → 100644
View file @ 8ebe42ce
<button ng-click="toggle()">{{ visible ? 'Hide' : 'Show' }}</button>
<div ng-show="visible">
<rzslider rz-slider-model="slider.value"
rz-slider-options="slider.options"></rzslider>
</div>
snippets/slider_toggle.js 0 → 100644
View file @ 8ebe42ce
$scope.visible = false;
$scope.slider = {
value: 5,
options: {
floor: 0,
ceil: 10
}
};
$scope.toggle = function () {
$scope.visible = !$scope.visible;
$timeout(function () {
$scope.$broadcast('rzSliderForceRender');
});
};
snippets/slider_translate.js 0 → 100644
View file @ 8ebe42ce
$scope.slider = {
minValue: 100,
maxValue: 400,
options: {
floor: 0,
ceil: 500,
translate: function(value) {
return '$' + value;
}
}
};
snippets/slider_visible_bar.js 0 → 100644
View file @ 8ebe42ce
$scope.slider = {
value: 10,
options: {
showSelectionBar: true
}
};
\ No newline at end of file
snippets/tabSliders.html 0 → 100644
View file @ 8ebe42ce
<tabset>
<tab heading="Slider 1" select="refreshSlider()">
<rzslider rz-slider-model="tabSliders.slider1.value"></rzslider>
</tab>
<tab heading="Slider 2" select="refreshSlider()">
<rzslider rz-slider-model="tabSliders.slider2.value"></rzslider>
</tab>
</tabset>
snippets/tabSliders.js 0 → 100644
View file @ 8ebe42ce
$scope.tabSliders = {
slider1: {
value: 100
},
slider2: {
value: 200
}
};
$scope.refreshSlider = function () {
$timeout(function () {
$scope.$broadcast('rzSliderForceRender');
});
};
snippets/vertical_sliders.html 0 → 100644
View file @ 8ebe42ce
<rzslider rz-slider-model="verticalSlider.value"
rz-slider-options="verticalSlider.options"></rzslider>
<rzslider rz-slider-model="verticalSlider2.minValue" rz-slider-high="verticalSlider2.maxValue"
rz-slider-options="verticalSlider2.options"></rzslider>
<rzslider rz-slider-model="verticalSlider3.value"
rz-slider-options="verticalSlider3.options"></rzslider>
<rzslider rz-slider-model="verticalSlider4.minValue" rz-slider-high="verticalSlider4.maxValue"
rz-slider-options="verticalSlider4.options"></rzslider>
<rzslider rz-slider-model="verticalSlider5.value"
rz-slider-options="verticalSlider5.options"></rzslider>
<rzslider rz-slider-model="verticalSlider6.value"
rz-slider-options="verticalSlider6.options"></rzslider>
snippets/vertical_sliders.js 0 → 100644
View file @ 8ebe42ce
$scope.verticalSlider1 = {
value: 0,
options: {
floor: 0,
ceil: 10,
vertical: true
}
};
$scope.verticalSlider2 = {
minValue: 20,
maxValue: 80,
options: {
floor: 0,
ceil: 100,
vertical: true
}
};
$scope.verticalSlider3 = {
value: 5,
options: {
floor: 0,
ceil: 10,
vertical: true,
showTicks: true
}
};
$scope.verticalSlider4 = {
minValue: 1,
maxValue: 5,
options: {
floor: 0,
ceil: 6,
vertical: true,
showTicksValues: true
}
};
$scope.verticalSlider5 = {
value: 50,
options: {
floor: 0,
ceil: 100,
vertical: true,
showSelectionBar: true
}
};
$scope.verticalSlider6 = {
value: 6,
options: {
floor: 0,
ceil: 6,
vertical: true,
showSelectionBar: true,
showTicksValues: true,
ticksValuesTooltip: function (v) {
return 'Tooltip for ' + v;
}
}
};
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