Skip to content

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

Update demo from master

parent 71766dda
Hide whitespace changes
Inline Side-by-side
Showing with 284 additions and 191 deletions
demo.css
View file @ 405fabcd
...@@ -11,3 +11,10 @@ article { margin-bottom: 10px; } ...@@ -11,3 +11,10 @@ article { margin-bottom: 10px; }
.field-title { .field-title {
width: 100px; width: 100px;
} }
.vertical-sliders {
margin: 0;
}
.vertical-sliders > div {
height: 250px;
}
demo.js
View file @ 405fabcd
...@@ -118,6 +118,66 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) { ...@@ -118,6 +118,66 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
} }
}; };
//Vertical sliders
$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;
}
}
};
//Read-only slider //Read-only slider
$scope.read_only_slider = { $scope.read_only_slider = {
value: 50, value: 50,
......
index.html
View file @ 405fabcd
...@@ -2,205 +2,231 @@ ...@@ -2,205 +2,231 @@
<html ng-app="rzSliderDemo"> <html ng-app="rzSliderDemo">
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>AngularJS Touch Slider</title> <title>AngularJS Touch Slider</title>
<!-- 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="../dist/rzslider.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>
<body ng-controller="MainCtrl"> <body ng-controller="MainCtrl">
<div class="wrapper"> <div class="wrapper">
<header> <header>
<h1>AngularJS Touch Slider</h1> <h1>AngularJS Touch Slider</h1>
</header> </header>
<article> <article>
<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>
</article> </article>
<article> <article>
<h2>Range slider</h2> <h2>Range slider</h2>
Min Value: <input type="number" ng-model="minRangeSlider.minValue"/><br/> Min Value: <input type="number" ng-model="minRangeSlider.minValue"/><br/>
Max Value: <input type="number" ng-model="minRangeSlider.maxValue"/><br/> Max Value: <input type="number" ng-model="minRangeSlider.maxValue"/><br/>
<rzslider <rzslider
rz-slider-model="minRangeSlider.minValue" rz-slider-model="minRangeSlider.minValue"
rz-slider-high="minRangeSlider.maxValue" rz-slider-high="minRangeSlider.maxValue"
rz-slider-options="minRangeSlider.options" rz-slider-options="minRangeSlider.options"
></rzslider> ></rzslider>
</article> </article>
<article> <article>
<h2>Slider with visible selection bar</h2> <h2>Slider with visible selection bar</h2>
<rzslider <rzslider
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>
</article> </article>
<article> <article>
<h2>Slider with custom floor/ceil/step</h2> <h2>Slider with custom floor/ceil/step</h2>
<rzslider <rzslider
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>
</article> </article>
<article> <article>
<h2>Slider with callbacks on start, change and end</h2> <h2>Slider with callbacks on start, change and end</h2>
<p>Value linked on start: {{ otherData.start }}</p> <p>Value linked on start: {{ otherData.start }}</p>
<p>Value linked on change: {{ otherData.change }}</p> <p>Value linked on change: {{ otherData.change }}</p>
<p>Value linked on end: {{ otherData.end }}</p> <p>Value linked on end: {{ otherData.end }}</p>
<rzslider <rzslider
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>
</article> </article>
<article> <article>
<h2>Slider with custom display function</h2> <h2>Slider with custom display function</h2>
<rzslider <rzslider
rz-slider-model="slider_translate.minValue" rz-slider-model="slider_translate.minValue"
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>
</article> </article>
<article> <article>
<h2>Slider with Alphabet</h2> <h2>Slider with Alphabet</h2>
<rzslider <rzslider
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>
</article> </article>
<article> <article>
<h2>Slider with ticks</h2> <h2>Slider with ticks</h2>
<rzslider <rzslider
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>
</article> </article>
<article> <article>
<h2>Slider with ticks and values (and tooltips)</h2> <h2>Slider with ticks and values (and tooltips)</h2>
<rzslider <rzslider
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>
</article> </article>
<article> <article>
<h2>Range slider with ticks and values</h2> <h2>Range slider with ticks and values</h2>
<rzslider <rzslider
rz-slider-model="range_slider_ticks_values.minValue" rz-slider-model="range_slider_ticks_values.minValue"
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>
</article> </article>
<article> <article>
<h2>Slider with draggable range</h2> <h2>Slider with draggable range</h2>
<rzslider <rzslider
rz-slider-model="slider_draggable_range.minValue" rz-slider-model="slider_draggable_range.minValue"
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>
</article> </article>
<article> <article>
<h2>Disabled slider</h2> <h2>Vertical sliders</h2>
<label>Disabled <input type="checkbox" ng-model="disabled_slider.options.disabled"></label> <div class="row vertical-sliders" style="margin: 20px;">
<rzslider <div class="col-md-2">
rz-slider-model="disabled_slider.value" <rzslider rz-slider-model="verticalSlider1.value" rz-slider-options="verticalSlider1.options"></rzslider>
rz-slider-options="disabled_slider.options" </div>
></rzslider> <div class="col-md-2">
</article> <rzslider rz-slider-model="verticalSlider2.minValue" rz-slider-high="verticalSlider2.maxValue"
rz-slider-options="verticalSlider2.options"></rzslider>
<article> </div>
<h2>Read-only slider</h2> <div class="col-md-2">
<label>Read-only <input type="checkbox" ng-model="read_only_slider.options.readOnly"></label> <rzslider rz-slider-model="verticalSlider3.value" rz-slider-options="verticalSlider3.options"></rzslider>
<rzslider </div>
rz-slider-model="read_only_slider.value" <div class="col-md-2">
rz-slider-options="read_only_slider.options" <rzslider rz-slider-model="verticalSlider4.minValue" rz-slider-high="verticalSlider4.maxValue"
></rzslider> rz-slider-options="verticalSlider4.options"></rzslider>
</article> </div>
<div class="col-md-2">
<article> <rzslider rz-slider-model="verticalSlider5.value" rz-slider-options="verticalSlider5.options"></rzslider>
<h2>Toggle slider example</h2> </div>
<button ng-click="toggle()">{{ visible ? 'Hide' : 'Show' }}</button> <div class="col-md-2">
<br/> <rzslider rz-slider-model="verticalSlider6.value" rz-slider-options="verticalSlider6.options"></rzslider>
<div ng-show="visible"> </div>
<rzslider </div>
rz-slider-model="slider_toggle.value" </article>
rz-slider-options="slider_toggle.options"></rzslider>
</div> <article>
</article> <h2>Disabled slider</h2>
<label>Disabled <input type="checkbox" ng-model="disabled_slider.options.disabled"></label>
<article> <rzslider
<h2>Sliders inside a modal</h2> rz-slider-model="disabled_slider.value"
Normal slider value: {{percentages.normal.low}}% rz-slider-options="disabled_slider.options"
</br> ></rzslider>
Range slider values: {{percentages.range.low}}% and {{percentages.range.high}}% </article>
</br>
<button type="button" ng-click="openModal()" class="btn btn-default btn-lg">Open Modal!</button> <article>
</article> <h2>Read-only slider</h2>
<label>Read-only <input type="checkbox" ng-model="read_only_slider.options.readOnly"></label>
<article> <rzslider
<h2>Sliders inside tabs</h2> rz-slider-model="read_only_slider.value"
<p>Price 1: {{tabSliders.slider1.value}}</p> rz-slider-options="read_only_slider.options"
<p>Price 2: {{tabSliders.slider2.value}}</p> ></rzslider>
<tabset> </article>
<tab heading="Slider 1" select="refreshSlider()">
<rzslider rz-slider-model="tabSliders.slider1.value"></rzslider> <article>
</tab> <h2>Toggle slider example</h2>
<tab heading="Slider 2" select="refreshSlider()"> <button ng-click="toggle()">{{ visible ? 'Hide' : 'Show' }}</button>
<rzslider rz-slider-model="tabSliders.slider2.value"></rzslider> <br/>
</tab> <div ng-show="visible">
</tabset> <rzslider
</article> rz-slider-model="slider_toggle.value"
rz-slider-options="slider_toggle.options"></rzslider>
<article> </div>
<h2>Slider with all options demo</h2> </article>
<div class="row all-options">
<div class="col-md-4"> <article>
<label class="field-title">Min Value: </label><input type="number" ng-model="slider_all_options.minValue"/><br/> <h2>Sliders inside a modal</h2>
<label class="field-title"><input type="checkbox" ng-click="toggleHighValue()"> Max Value: </label> Normal slider value: {{percentages.normal.low}}%
<input type="number" ng-model="slider_all_options.maxValue" ng-disabled="slider_all_options.maxValue == null"/><br/> </br>
<label class="field-title">Floor: </label><input type="number" ng-model="slider_all_options.options.floor"/><br/> Range slider values: {{percentages.range.low}}% and {{percentages.range.high}}%
<label class="field-title">Ceil: </label><input type="number" ng-model="slider_all_options.options.ceil"/><br/> </br>
</div> <button type="button" ng-click="openModal()" class="btn btn-default btn-lg">Open Modal!</button>
<div class="col-md-4"> </article>
<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/> <article>
<label>Hide limits <input type="checkbox" ng-model="slider_all_options.options.hideLimitLabels"></label><br/> <h2>Sliders inside tabs</h2>
<label>Draggable range <input type="checkbox" ng-model="slider_all_options.options.draggableRange"></label> <p>Price 1: {{tabSliders.slider1.value}}</p>
</div> <p>Price 2: {{tabSliders.slider2.value}}</p>
<div class="col-md-4"> <tabset>
<label>Show ticks <input type="checkbox" ng-model="slider_all_options.options.showTicks"></label><br/> <tab heading="Slider 1" select="refreshSlider()">
<label>Show ticks values <input type="checkbox" ng-model="slider_all_options.options.showTicksValues"></label><br/> <rzslider rz-slider-model="tabSliders.slider1.value"></rzslider>
<label>Disabled <input type="checkbox" ng-model="slider_all_options.options.disabled"></label><br/> </tab>
<label>Read-Only <input type="checkbox" ng-model="slider_all_options.options.readOnly"></label> <tab heading="Slider 2" select="refreshSlider()">
</div> <rzslider rz-slider-model="tabSliders.slider2.value"></rzslider>
</div> </tab>
<rzslider </tabset>
rz-slider-model="slider_all_options.minValue" </article>
rz-slider-high="slider_all_options.maxValue"
rz-slider-options="slider_all_options.options" <article>
></rzslider> <h2>Slider with all options demo</h2>
</article> <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> </div>
</body> </body>
<script src="angular.min.js"></script> <script src="../bower_components/angular/angular.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="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.min.js"></script> <script src="../dist/rzslider.js"></script>
<script src="demo.js"></script> <script src="demo.js"></script>
</html> </html>
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