gh-page

226d80d5 · Rafal Zajac · 226d80d5 · 226d80d5 · 226d80d5 · 226d80d5
Commit 226d80d5 authored May 21, 2015 by Rafal Zajac
7 changed files
--- a/.gitignore
+++ b/.gitignore
+node_modules/
+.idea/
+bower_components/
--- a/angular.min.js
+++ b/angular.min.js
--- a/demo.css
+++ b/demo.css
+* { 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
--- a/index.html
+++ b/index.html
+<!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>
+            Value: <pre>{{ priceSlider | json }}</pre>
+
+            <input type="text" ng-model="priceSlider.min"/><br/>
+            <input type="text" ng-model="priceSlider.max"/><br/>
+
+            <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>One value slider example</h2>
+
+            Value: {{ priceSlider2 | json }}
+            <rzslider
+                rz-slider-floor="0"
+                rz-slider-ceil="450"
+                rz-slider-model="priceSlider2"
+                rz-slider-translate="translate"></rzslider>
+        </article>
+
+        <article>
+            <h2>Currency slider example</h2>
+
+            Value: {{ priceSlider2 | json }}
+            <rzslider rz-slider-model="priceSlider3"
+                rz-slider-floor="50"
+                rz-slider-ceil="450"></rzslider>
+        </article>
+
+        <article>
+            <h2>Alphabet slider example</h2>
+            Value: {{ alphabetTranslate(letter) }}
+            <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: 500,
+            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>
--- a/rzslider.css
+++ b/rzslider.css
+/**
+ * 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.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: #ffffff;
+  -webkit-border-radius: 4px;
+     -moz-border-radius: 4px;
+          border-radius: 4px;
+  content: '';
+}
+
+rzslider span.pointer:hover:after {
+  background-color: #ffffff;
+}
+
+rzslider span.pointer.active:after {
+  background-color: #ffffff;
+}
+
+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
--- a/rzslider.js
+++ b/rzslider.js
--- a/update.sh
+++ b/update.sh
+#!/bin/bash
+
+git checkout master -- .gitignore
+
+git co master -- demo/demo.css
+git co master -- demo/index.html
+git co master -- dist/rzslider.css
+git co master -- dist/rzslider.css
+git co master -- rzslider.js
+
+mv demo/demo.css demo.css
+mv demo/index.html index.html
+mv dist/rzslider.css rzslider.css
+
+cp bower_components/angular/angular.min.js angular.min.js
+
+rm -rf demo
+rm -rf dist