Skip to content

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

Improve the example page. Increase the updatability of the slider options.

parent 39ef89e7
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 421 additions and 257 deletions
demo/demo.css
View file @ a3aacff3
* { margin: 0; padding: 0; }
body { font-family: 'Open Sans', sans-serif; color: #1f2636; font-size: 14px; }
body { font-family: 'Open Sans', sans-serif; color: #1f2636; font-size: 14px; padding-bottom: 40px; }
header { background: #0db9f0; color: #fff; margin: -40px; margin-bottom: 40px; text-align: center; padding: 40px 0; }
h1 { font-weight: 300; }
h2 {margin-bottom:10px;}
.wrapper { background: #fff; padding: 40px; }
article { margin-bottom: 40px; }
article { margin-bottom: 10px; }
.tab-pane{
padding-top: 10px;
}
.field-title {
width: 100px;
}
demo/demo.js
View file @ a3aacff3
var app = angular.module('rzSliderDemo', ['rzModule']);
var app = angular.module('rzSliderDemo', ['rzModule', 'ui.bootstrap']);
app.controller('MainCtrl', function($scope, $timeout) {
app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
//Minimal slider config
$scope.minSlider = {
value: 10
......@@ -142,8 +142,15 @@ app.controller('MainCtrl', function($scope, $timeout) {
}
};
// Slider inside ng-show
$scope.visible = false;
$scope.slider_toggle = {
value: 5,
options: {
ceil: 10,
floor: 0
}
};
$scope.toggle = function() {
$scope.visible = !$scope.visible;
$timeout(function() {
......@@ -151,11 +158,99 @@ app.controller('MainCtrl', function($scope, $timeout) {
});
};
$scope.slider_toggle = {
value: 5,
//Slider inside modal
$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) {
$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.
});
};
//Slider inside tabs
$scope.tabSliders = {
slider1: {
value: 100
},
slider2: {
value: 200
}
};
$scope.refreshSlider = function() {
$timeout(function() {
$scope.$broadcast('rzSliderForceRender');
});
};
//Slider with draggable range
$scope.slider_all_options = {
minValue: 2,
options: {
floor: 0,
ceil: 10,
floor: 0
step: 1,
precision: 0,
draggableRange: false,
showSelectionBar: false,
hideLimitLabels: false,
readOnly: false,
disabled: false,
showTicks: false,
showTicksValues: false
}
};
$scope.toggleHighValue = function() {
if($scope.slider_all_options.maxValue != null) {
$scope.slider_all_options.maxValue = undefined;
}
else {
$scope.slider_all_options.maxValue = 8;
}
}
});
demo/index.html
View file @ a3aacff3
......@@ -5,8 +5,10 @@
<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"/>
<!-- 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="../dist/rzslider.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'>
</head>
......@@ -142,11 +144,63 @@
</div>
</article>
<article>
<h2>Sliders inside a 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>
<article>
<h2>Sliders inside tabs</h2>
<p>Price 1: {{tabSliders.slider1.value}}</p>
<p>Price 2: {{tabSliders.slider2.value}}</p>
<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>
</article>
<article>
<h2>Slider with all options demo</h2>
<div class="row all-options">
<div class="col-md-4">
<label class="field-title">Min Value: </label><input type="number" ng-model="slider_all_options.minValue"/><br/>
<label class="field-title"><input type="checkbox" ng-click="toggleHighValue()"> Max Value: </label>
<input type="number" ng-model="slider_all_options.maxValue" ng-disabled="slider_all_options.maxValue == null"/><br/>
<label class="field-title">Floor: </label><input type="number" ng-model="slider_all_options.options.floor"/><br/>
<label class="field-title">Ceil: </label><input type="number" ng-model="slider_all_options.options.ceil"/><br/>
</div>
<div class="col-md-4">
<label class="field-title">Step: </label><input type="number" ng-model="slider_all_options.options.step"/><br/>
<label class="field-title">Precision: </label><input type="number" ng-model="slider_all_options.options.precision"/><br/>
<label>Hide limits <input type="checkbox" ng-model="slider_all_options.options.hideLimitLabels"></label><br/>
<label>Draggable range <input type="checkbox" ng-model="slider_all_options.options.draggableRange"></label>
</div>
<div class="col-md-4">
<label>Show ticks <input type="checkbox" ng-model="slider_all_options.options.showTicks"></label><br/>
<label>Show ticks values <input type="checkbox" ng-model="slider_all_options.options.showTicksValues"></label><br/>
<label>Disabled <input type="checkbox" ng-model="slider_all_options.options.disabled"></label><br/>
<label>Read-Only <input type="checkbox" ng-model="slider_all_options.options.readOnly"></label>
</div>
</div>
<rzslider
rz-slider-model="slider_all_options.minValue"
rz-slider-high="slider_all_options.maxValue"
rz-slider-options="slider_all_options.options"
></rzslider>
</article>
</div>
</body>
<script src="../bower_components/angular/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.js"></script>
<script src="../dist/rzslider.js"></script>
<script src="demo.js"></script>
</html>
demo/sliderModal.html 0 → 100644
View file @ a3aacff3
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-lg-12">
<label class="control-label">Normal slider into modal</label>
<rzslider
rz-slider-model="percentages.normal.low"
rz-slider-options="percentages.normal.options">
</rzslider>
</div>
</div>
<div class="row">
<div class=" col-md-12 col-lg-12">
<label class="control-label">Range slider into modal</label>
<rzslider
rz-slider-model="percentages.range.low"
rz-slider-high="percentages.range.high"
rz-slider-options="percentages.range.options">
</rzslider>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<button type="button" ng-click="ok()" class="btn btn-primary">Save</button>
<button type="button" ng-click="cancel()" class="btn btn-default">Cancel</button>
</div>
</div>
</div>
</div>
dist/rzslider.css
View file @ a3aacff3
......@@ -16,7 +16,7 @@ rzslider {
display: inline-block;
width: 100%;
height: 4px;
margin: 30px 0 15px 0;
margin: 35px 0 15px 0;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
......@@ -55,6 +55,10 @@ rzslider .rz-bar-wrapper {
box-sizing: border-box;
}
rzslider .rz-bar-wrapper.rz-draggable {
cursor: move;
}
rzslider .rz-bar {
left: 0;
z-index: 1;
......
dist/rzslider.js
View file @ a3aacff3
This diff is collapsed.
dist/rzslider.min.css
View file @ a3aacff3
/*! angularjs-slider - v1.1.0 - (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/rzajac/angularjs-slider.git - 2015-11-11 */
rzslider{position:relative;display:inline-block;width:100%;height:4px;margin:30px 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{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:#fff;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;content:''}rzslider .rz-pointer:hover:after{background-color:#fff}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:flex;width:100%;padding:0 11px;margin:0;list-style:none;box-sizing:border-box;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)}
\ No newline at end of file
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:#fff;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;content:''}rzslider .rz-pointer:hover:after{background-color:#fff}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:flex;width:100%;padding:0 11px;margin:0;list-style:none;box-sizing:border-box;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)}
\ No newline at end of file
dist/rzslider.min.js
View file @ a3aacff3
This diff is collapsed.
src/rzslider.js
View file @ a3aacff3
This diff is collapsed.
src/rzslider.less
View file @ a3aacff3
......@@ -14,7 +14,7 @@ rzslider {
position: relative;
height: @barHeight;
width: 100%;
margin: 30px 0 15px 0;
margin: 35px 0 15px 0;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
......@@ -49,6 +49,9 @@ rzslider {
width: 100%;
height: @handleSize;
z-index: 1;
&.rz-draggable {
cursor: move;
}
}
.rz-bar {
......@@ -140,4 +143,4 @@ rzslider {
}
}
}
}
\ No newline at end of file
}
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