Update demo with latest examples from master

.gitignore

 node_modules/
 .idea/
 bower_components/
-temp/
+temp/
\ No newline at end of file
+*.lock

demo.css

@@ -59,4 +59,49 @@ article {
 
 .vertical-sliders > div {
     height: 250px;
-}
+}
\ No newline at end of file
+
+.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;
+}

demo.js

@@ -41,6 +41,17 @@ app.controller('MainCtrl', function ($scope, $rootScope, $timeout, $uibModal) {
     }
   };
 
+  $scope.customSlider = {
+    minValue: 10,
+    maxValue: 90,
+    options: {
+      floor: 0,
+      ceil: 100,
+      step: 10,
+      showTicks: true
+    }
+  };
+
   $scope.minMaxLimitSlider = {
     value: 50,
     options: {
@@ -118,6 +129,20 @@ app.controller('MainCtrl', function ($scope, $rootScope, $timeout, $uibModal) {
     }
   };
 
+  //Slider with selection bar gradient
+  $scope.gradient_slider_bar = {
+    minValue: 0,
+    maxValue: 80,
+    options: {
+      ceil: 100,
+      showSelectionBar: true,
+      selectionBarGradient: {
+        from: 'white',
+        to: '#FC0'
+      }
+    }
+  };
+
   $scope.color_slider_bar = {
     value: 12,
     options: {

index.html

@@ -61,6 +61,27 @@
     <show-code js-file="rangeSlider" html-file="rangeSlider"></show-code>
   </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>
+    <tabset class="code">
+      <tab heading="HTML">
+        <div hljs hljs-include="'snippets/custom_slider.html'" hljs-language="html"></div>
+      </tab>
+      <tab heading="custom-style.css">
+        <div hljs hljs-include="'snippets/custom_slider.css'" hljs-language="css"></div>
+      </tab>
+      <tab heading="JS">
+        <div hljs hljs-include="'snippets/custom_slider.js'" hljs-language="js"></div>
+      </tab>
+    </tabset>
+  </article>
+
   <article>
     <h2>Range slider with min limit set to 10 and max limit set to 90</h2>
     <rzslider
@@ -127,6 +148,16 @@
     <show-code js-file="slider_visible_bar_from_value" html-file="singleSlider"></show-code>
   </article>
 
+  <article>
+    <h2>Slider with selection bar gradient</h2>
+    <rzslider
+      rz-slider-model="gradient_slider_bar.minValue"
+      rz-slider-high="gradient_slider_bar.maxValue"
+      rz-slider-options="gradient_slider_bar.options"
+    ></rzslider>
+    <show-code js-file="slider_gradient" html-file="rangeSlider"></show-code>
+  </article>
+
   <article>
     <h2>Slider with dynamic selection bar color</h2>
     <rzslider

snippets/custom_slider.css

+.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;
+}

snippets/custom_slider.html

+<rzslider class="custom-slider"
+          rz-slider-model="slider.minValue"
+          rz-slider-high="slider.maxValue"
+          rz-slider-options="slider.options"></rzslider>

snippets/custom_slider.js

+$scope.slider = {
+  minValue: 10,
+  maxValue: 90,
+  options: {
+    floor: 0,
+    ceil: 100,
+    step: 10,
+    showTicks: true
+  }
+};

snippets/slider_gradient.js

+$scope.slider = {
+  minValue: 0,
+  maxValue: 80,
+  options: {
+    ceil: 100,
+    showSelectionBar: true,
+    selectionBarGradient: {
+      from: 'white',
+      to: '#FC0'
+    }
+  }
+};