docs(styling): add a custom style example

ValentinH · ValentinH · commit 1303593f557c · 2017-01-02T21:21:10.000+01:00
diff --git a/demo/demo.css b/demo/demo.css
@@ -1,20 +1,98 @@
-* { 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;
+}
+
+.tab-pane {
   padding-top: 10px;
 }
+
 .field-title {
   width: 100px;
 }
 
 .vertical-sliders {
   margin: 0;
 }
+
 .vertical-sliders > div {
   height: 250px;
 }
+
+.custom-slider.rzslider .rz-bar {
+  background: #ffe4d1;
+  height: 2px;
+}
+
+.custom-slider.rzslider .rz-selection {
+  background: orange;
+}
+
+.custom-slider.rzslider .rz-pointer {
+  width: 8px;
+  height: 16px;
+  top: auto; /* to remove the default positioning */
+  bottom: 0;
+  background-color: #333;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+}
+
+.custom-slider.rzslider .rz-pointer:after {
+  display: none;
+}
+
+.custom-slider.rzslider .rz-bubble {
+  bottom: 14px;
+}
+
+.custom-slider.rzslider .rz-limit {
+  font-weight: bold;
+  color: orange;
+}
+
+.custom-slider.rzslider .rz-tick {
+  width: 1px;
+  height: 10px;
+  margin-left: 4px;
+  border-radius: 0;
+  background: #ffe4d1;
+  top: -1px;
+}
+
+.custom-slider.rzslider .rz-tick.rz-selected {
+  background: orange;
+}
diff --git a/demo/demo.js b/demo/demo.js
@@ -17,6 +17,17 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $uibModal) {
     }
   };
 
+  $scope.customSlider = {
+    minValue: 10,
+    maxValue: 90,
+    options: {
+      floor: 0,
+      ceil: 100,
+      step: 10,
+      showTicks: true
+    }
+  };
+
   //Range slider with minLimit and maxLimit config
   $scope.minMaxLimitSlider = {
     value: 50,
diff --git a/demo/index.html b/demo/index.html
@@ -36,6 +36,16 @@ <h2>Range slider</h2>
     ></rzslider>
   </article>
 
+  <article>
+    <h2>Slider with custom style</h2>
+    <rzslider
+      class="custom-slider"
+      data-rz-slider-model="customSlider.minValue"
+      data-rz-slider-high="customSlider.maxValue"
+      data-rz-slider-options="customSlider.options"
+    ></rzslider>
+  </article>
+
   <article>
     <h2>Range slider with min limit set to 10 and max limit set to 90 </h2>
     <rzslider
