Skip to content

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

Update site and add introduction content

parent ac790b87
Expand all Show whitespace changes
Inline Side-by-side
Showing with 2171 additions and 1420 deletions
demo.css
View file @ 10998a67
* { margin: 0; padding: 0; }
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: 10px; }
.tab-pane{
* {
margin: 0;
padding: 0;
}
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: 10px;
}
.introduction ul{
margin-left:40px;
}
.tab-pane {
padding-top: 10px;
}
.field-title {
width: 100px;
}
......@@ -15,6 +51,7 @@ article { margin-bottom: 10px; }
.vertical-sliders {
margin: 0;
}
.vertical-sliders > div {
height: 250px;
}
dist/rzslider.css 0 → 100644
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 0 → 100644
View file @ 10998a67
This diff is collapsed.
index.html
View file @ 10998a67
......@@ -4,7 +4,7 @@
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AngularJS Touch Slider</title>
<title>AngularJS Slider</title>
<!-- 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://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.css"/>
......@@ -16,9 +16,30 @@
<div class="wrapper">
<header>
<h1>AngularJS Touch Slider</h1>
<h1>AngularJS Slider</h1>
<a href="https://github.com/angular-slider/angularjs-slider"><img
style="position: absolute; top: 0; right: 0; border: 0;"
src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
alt="Fork me on GitHub"
data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
</header>
<article class="introduction">
<h2>AngularJS slider directive with no external dependencies</h2>
<p>Slider directive implementation for AngularJS, without any dependencies</p>
<p>
<ul>
<li>Mobile friendly</li>
<li>Fast</li>
<li>Well documented</li>
<li>Customizable</li>
<li>Simple to use</li>
<li>Compatibility with jQuery Lite, ie. without full jQuery</li>
</ul>
</p>
<hr>
</article>
<article>
<h2>Simple slider</h2>
Model: <input type="number" ng-model="minSlider.value"/><br/>
......@@ -144,24 +165,28 @@
<h2>Vertical sliders</h2>
<div class="row vertical-sliders" style="margin: 20px;">
<div class="col-md-2">
<rzslider rz-slider-model="verticalSlider1.value" rz-slider-options="verticalSlider1.options"></rzslider>
<rzslider rz-slider-model="verticalSlider1.value"
rz-slider-options="verticalSlider1.options"></rzslider>
</div>
<div class="col-md-2">
<rzslider rz-slider-model="verticalSlider2.minValue" rz-slider-high="verticalSlider2.maxValue"
rz-slider-options="verticalSlider2.options"></rzslider>
</div>
<div class="col-md-2">
<rzslider rz-slider-model="verticalSlider3.value" rz-slider-options="verticalSlider3.options"></rzslider>
<rzslider rz-slider-model="verticalSlider3.value"
rz-slider-options="verticalSlider3.options"></rzslider>
</div>
<div class="col-md-2">
<rzslider rz-slider-model="verticalSlider4.minValue" rz-slider-high="verticalSlider4.maxValue"
rz-slider-options="verticalSlider4.options"></rzslider>
</div>
<div class="col-md-2">
<rzslider rz-slider-model="verticalSlider5.value" rz-slider-options="verticalSlider5.options"></rzslider>
<rzslider rz-slider-model="verticalSlider5.value"
rz-slider-options="verticalSlider5.options"></rzslider>
</div>
<div class="col-md-2">
<rzslider rz-slider-model="verticalSlider6.value" rz-slider-options="verticalSlider6.options"></rzslider>
<rzslider rz-slider-model="verticalSlider6.value"
rz-slider-options="verticalSlider6.options"></rzslider>
</div>
</div>
</article>
......@@ -222,21 +247,29 @@
<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">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/>
<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 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>
<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>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>
......
rzslider.css deleted 100644 → 0
View file @ ac790b87
/**
* Angular JS slider directive
*
* (c) Rafal Zajac <rzajac@gmail.com>
* http://github.com/rzajac/angularjs-slider
*
* Licensed under the MIT license
*/
/* Slider colors */
/* Slider size parameters */
rzslider {
position: relative;
display: inline-block;
width: 100%;
height: 4px;
margin: 30px 0 15px 0;
vertical-align: middle;
}
rzslider span {
position: absolute;
display: inline-block;
white-space: nowrap;
}
rzslider span.rz-base {
width: 100%;
height: 100%;
padding: 0;
}
rzslider span.rz-bar {
z-index: 0;
width: 100%;
height: 100%;
background: #d8e0f3;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
rzslider span.rz-bar.rz-selection {
z-index: 1;
width: 0;
background: #0db9f0;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
rzslider span.rz-pointer {
top: -14px;
z-index: 2;
width: 32px;
height: 32px;
cursor: pointer;
background-color: #0db9f0;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
}
rzslider span.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 span.rz-pointer:hover:after {
background-color: #ffffff;
}
rzslider span.rz-pointer.rz-active:after {
background-color: #451aff;
}
rzslider span.rz-bubble {
top: -32px;
padding: 1px 3px;
color: #55637d;
cursor: default;
}
rzslider span.rz-bubble.rz-selection {
top: 16px;
}
rzslider span.rz-bubble.rz-limit {
color: #55637d;
}
\ No newline at end of file
rzslider.js deleted 100644 → 0
View file @ ac790b87
This diff is collapsed.
update.sh
View file @ 10998a67
......@@ -6,7 +6,7 @@ git checkout master -- .gitignore
git checkout master -- dist/rzslider.css
git checkout master -- dist/rzslider.js
#mv demo/* ./
mv dist/* ./
# cp bower_components/angular/angular.min.js angular.min.js
......
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