Skip to content

I
i20rzslider
Commit 2e18cb32 authored by Angelin's avatar Angelin
Browse files
Options

Updated slider and demo 

Updated less file to be parametric, updated slider stiles and improved
the demo page.
parent 5e669dda
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 122 additions and 84 deletions
demo/demo.css 0 → 100644
View file @ 2e18cb32
* { margin: 0; padding: 0; }
body { font-family: 'Open Sans', sans-serif; color: #1f2636; font-size: 14px; }
header { background: #0db9f0; color: #fff; margin: -40px; margin-bottom: 40px; text-align: center; padding: 40px 0; }
h1 { font-weight: 300; }
.wrapper { background: #fff; padding: 40px; }
article { margin-bottom: 40px; }
\ No newline at end of file
demo/index.html
View file @ 2e18cb32
...@@ -3,67 +3,78 @@ ...@@ -3,67 +3,78 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>AngularJS Slider Plunker</title> <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="../dist/rzslider.css" /> <link rel="stylesheet" href="../dist/rzslider.css" />
<script src="../bower_components/angular/angular.min.js"></script> <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>
<script src="../rzslider.js"></script>
</head> </head>
<body ng-controller="MainCtrl"> <body ng-controller="MainCtrl">
<div style="background-color: #808080;margin-left: 40px;margin-right: 50px; padding: 30px;"> <div class="wrapper">
<pre>{{ priceSlider | json }}</pre> <header>
<h1>AngularJS Touch Slider</h1>
<input type="text" ng-model="priceSlider.min"/><br/> </header>
<input type="text" ng-model="priceSlider.max"/><br/>
<article>
<br/> <h2>Min/max slider example</h2>
Value: <pre>{{ priceSlider | json }}</pre>
<rzslider
rz-slider-floor="priceSlider.floor" <input type="text" ng-model="priceSlider.min"/><br/>
rz-slider-ceil="priceSlider.ceil" <input type="text" ng-model="priceSlider.max"/><br/>
rz-slider-model="priceSlider.min"
rz-slider-high="priceSlider.max" <rzslider
rz-slider-step="1"></rzslider> rz-slider-floor="priceSlider.floor"
<br> <br> <br> rz-slider-ceil="priceSlider.ceil"
rz-slider-model="priceSlider.min"
<pre>{{ priceSlider2 | json }}</pre> rz-slider-high="priceSlider.max"
<br> <br> rz-slider-step="1"></rzslider>
<rzslider </article>
rz-slider-floor="0"
rz-slider-ceil="450" <article>
rz-slider-model="priceSlider2" <h2>One value slider example</h2>
rz-slider-translate="translate"></rzslider>
Value: {{ priceSlider2 | json }}
<pre>{{ priceSlider2 | json }}</pre> <rzslider
<br> <br> rz-slider-floor="0"
<rzslider rz-slider-model="priceSlider3" rz-slider-ceil="450"
rz-slider-floor="50" rz-slider-model="priceSlider2"
rz-slider-ceil="450"></rzslider> rz-slider-translate="translate"></rzslider>
</article>
<br><br><br>
<article>
<pre>{{ alphabetTranslate(letter) }}</pre> <h2>Currency slider example</h2>
<br><br> Value: {{ priceSlider2 | json }}
<rzslider rz-slider-model="priceSlider3"
<rzslider rz-slider-floor="50"
rz-slider-floor="0" rz-slider-ceil="450"></rzslider>
rz-slider-ceil="letterMax" </article>
rz-slider-model="letter"
rz-slider-translate="alphabetTranslate"></rzslider> <article>
<h2>Alphabet slider example</h2>
</div> Value: {{ alphabetTranslate(letter) }}
<rzslider
rz-slider-floor="0"
rz-slider-ceil="letterMax"
rz-slider-model="letter"
rz-slider-translate="alphabetTranslate"></rzslider>
</article>
</div>
</body> </body>
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../rzslider.js"></script>
<script> <script>
var app = angular.module('plunker', ['rzModule']); var app = angular.module('plunker', ['rzModule']);
app.controller('MainCtrl', function($scope) app.controller('MainCtrl', function($scope)
{ {
$scope.priceSlider = { $scope.priceSlider = {
min: 4, min: 100,
max: 481, max: 400,
ceil: 500, ceil: 500,
floor: 0 floor: 0
}; };
......
dist/rzslider.css
View file @ 2e18cb32
...@@ -7,11 +7,15 @@ ...@@ -7,11 +7,15 @@
* Licensed under the MIT license * Licensed under the MIT license
*/ */
/* Slider colors */
/* Slider size parameters */
rzslider { rzslider {
position: relative; position: relative;
display: inline-block; display: inline-block;
width: 100%; width: 100%;
height: 2px; height: 4px;
margin: 30px 0 15px 0; margin: 30px 0 15px 0;
vertical-align: middle; vertical-align: middle;
} }
...@@ -32,22 +36,28 @@ rzslider span.bar { ...@@ -32,22 +36,28 @@ rzslider span.bar {
z-index: 0; z-index: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: #fff; background: #d8e0f3;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
} }
rzslider span.bar.selection { rzslider span.bar.selection {
z-index: 1; z-index: 1;
width: 0; width: 0;
background: #67b700; background: #0db9f0;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
} }
rzslider span.pointer { rzslider span.pointer {
top: -15px; top: -14px;
z-index: 2; z-index: 2;
width: 32px; width: 32px;
height: 32px; height: 32px;
cursor: pointer; cursor: pointer;
background-color: #ffffff; background-color: #0db9f0;
-webkit-border-radius: 16px; -webkit-border-radius: 16px;
-moz-border-radius: 16px; -moz-border-radius: 16px;
border-radius: 16px; border-radius: 16px;
...@@ -59,7 +69,7 @@ rzslider span.pointer:after { ...@@ -59,7 +69,7 @@ rzslider span.pointer:after {
left: 12px; left: 12px;
width: 8px; width: 8px;
height: 8px; height: 8px;
background: #71818e; background: #ffffff;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
-moz-border-radius: 4px; -moz-border-radius: 4px;
border-radius: 4px; border-radius: 4px;
...@@ -67,24 +77,24 @@ rzslider span.pointer:after { ...@@ -67,24 +77,24 @@ rzslider span.pointer:after {
} }
rzslider span.pointer:hover:after { rzslider span.pointer:hover:after {
background-color: #67b700; background-color: #ffffff;
} }
rzslider span.pointer.active:after { rzslider span.pointer.active:after {
background-color: #67b700; background-color: #ffffff;
} }
rzslider span.bubble { rzslider span.bubble {
top: -32px; top: -32px;
padding: 1px 3px 1px 3px; padding: 1px 3px;
color: #67b700; color: #55637d;
cursor: default; cursor: default;
} }
rzslider span.bubble.selection { rzslider span.bubble.selection {
top: 15px; top: 16px;
} }
rzslider span.bubble.limit { rzslider span.bubble.limit {
color: #67b700; color: #55637d;
} }
\ No newline at end of file
dist/rzslider.min.css
View file @ 2e18cb32
/*! jusas-angularjs-slider - v0.1.6 - (c) Rafal Zajac <rzajac@gmail.com>, Jussi Saarivirta <jusasi@gmail.com>, https://github.com/rzajac/angularjs-slider.git - 2014-07-08 */ /*! jusas-angularjs-slider - v0.1.6 - (c) Rafal Zajac <rzajac@gmail.com>, Jussi Saarivirta <jusasi@gmail.com>, https://github.com/rzajac/angularjs-slider.git - 2015-05-21 */
rzslider{position:relative;display:inline-block;width:100%;height:2px;margin:30px 0 15px 0;vertical-align:middle}rzslider span{position:absolute;display:inline-block;white-space:nowrap}rzslider span.base{width:100%;height:100%;padding:0}rzslider span.bar{z-index:0;width:100%;height:100%;background:#fff}rzslider span.bar.selection{z-index:1;width:0;background:#67b700}rzslider span.pointer{top:-15px;z-index:2;width:32px;height:32px;cursor:pointer;background-color:#fff;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}rzslider span.pointer:after{position:absolute;top:12px;left:12px;width:8px;height:8px;background:#71818e;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;content:''}rzslider span.pointer:hover:after{background-color:#67b700}rzslider span.pointer.active:after{background-color:#67b700}rzslider span.bubble{top:-32px;padding:1px 3px 1px 3px;color:#67b700;cursor:default}rzslider span.bubble.selection{top:15px}rzslider span.bubble.limit{color:#67b700} 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.base{width:100%;height:100%;padding:0}rzslider span.bar{z-index:0;width:100%;height:100%;background:#d8e0f3;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider span.bar.selection{z-index:1;width:0;background:#0db9f0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider span.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.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 span.pointer:hover:after{background-color:#fff}rzslider span.pointer.active:after{background-color:#fff}rzslider span.bubble{top:-32px;padding:1px 3px;color:#55637d;cursor:default}rzslider span.bubble.selection{top:16px}rzslider span.bubble.limit{color:#55637d}
\ No newline at end of file \ No newline at end of file
dist/rzslider.min.js
View file @ 2e18cb32
This diff is collapsed.
rzslider.less
View file @ 2e18cb32
...@@ -13,17 +13,26 @@ ...@@ -13,17 +13,26 @@
border-radius: @radius; border-radius: @radius;
} }
@handleActiveColor: #67b700; /* Slider colors */
@handleHoverColor: #67b700; @handleActiveColor: #fff;
@labelTextColor: #67b700; @handleHoverColor: #fff;
@handleBgColor: #fff; @labelTextColor: #55637d;
@handleInnerColor: #71818e; @handleBgColor: #0db9f0;
@handleInnerColor: #fff;
@limitLabelTextColor: @labelTextColor; @limitLabelTextColor: @labelTextColor;
@barFillColor: @handleBgColor;
@barNormalColor: #d8e0f3;
/* Slider size parameters */
@handleSize: 32px;
@handlePointerSize: 8px;
@bubblePadding: 1px 3px;
@barHeight: 4px;
rzslider { rzslider {
display: inline-block; display: inline-block;
position: relative; position: relative;
height: 2px; height: @barHeight;
width: 100%; width: 100%;
margin: 30px 0 15px 0; margin: 30px 0 15px 0;
vertical-align: middle; vertical-align: middle;
...@@ -45,33 +54,35 @@ rzslider span.bar { ...@@ -45,33 +54,35 @@ rzslider span.bar {
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 0; z-index: 0;
background: #fff; background: @barNormalColor;
.rounded(@barHeight/2);
} }
rzslider span.bar.selection { rzslider span.bar.selection {
width: 0%; width: 0%;
z-index: 1; z-index: 1;
background: #67b700; background: @barFillColor;
.rounded(@barHeight/2);
} }
rzslider span.pointer { rzslider span.pointer {
cursor: pointer; cursor: pointer;
width: 32px; width: @handleSize;
height: 32px; height: @handleSize;
top: -15px; top: -@handleSize/2 + @barHeight/2;
background-color: @handleBgColor; background-color: @handleBgColor;
z-index: 2; z-index: 2;
.rounded(16px); .rounded(@handleSize/2);
} }
rzslider span.pointer:after { rzslider span.pointer:after {
content: ''; content: '';
width: 8px; width: @handlePointerSize;
height: 8px; height: @handlePointerSize;
position: absolute; position: absolute;
top: 12px; top: @handleSize/2 - @handlePointerSize/2;
left: 12px; left: @handleSize/2 - @handlePointerSize/2;
.rounded(4px); .rounded(@handlePointerSize/2);
background: @handleInnerColor; background: @handleInnerColor;
} }
...@@ -85,13 +96,13 @@ rzslider span.pointer.active:after { ...@@ -85,13 +96,13 @@ rzslider span.pointer.active:after {
rzslider span.bubble { rzslider span.bubble {
cursor: default; cursor: default;
top: -32px; top: -@handleSize;
padding: 1px 3px 1px 3px; padding: @bubblePadding;
color: @labelTextColor; color: @labelTextColor;
} }
rzslider span.bubble.selection { rzslider span.bubble.selection {
top: 15px; top: @handleSize/2;
} }
rzslider span.bubble.limit { rzslider span.bubble.limit {
......
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