Add demo for legend feature

demo.js

@@ -251,6 +251,25 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
     }
   };
 
+  //Slider with ticks values and legend
+  $scope.slider_ticks_legend = {
+    value: 5,
+    options: {
+      showTicksValues: true,
+      stepsArray: [
+        {value: 1, legend: 'Very poor'},
+        {value: 2},
+        {value: 3, legend: 'Fair'},
+        {value: 4},
+        {value: 5, legend: 'Average'},
+        {value: 6},
+        {value: 7, legend: 'Good'},
+        {value: 8},
+        {value: 9, legend: 'Excellent'}
+      ]
+    }
+  };
+
   //Slider with ticks and tooltip
   $scope.slider_ticks_tooltip = {
     value: 5,

index.html

@@ -245,6 +245,16 @@
     <show-code js-file="slider_ticks_intermediate" html-file="singleSlider"></show-code>
   </article>
 
+  <article>
+    <h2>Slider with ticks values and legend</h2>
+    <rzslider class="with-legend"
+              rz-slider-model="slider_ticks_legend.value"
+              rz-slider-options="slider_ticks_legend.options"
+    ></rzslider>
+    <br><br>
+    <show-code js-file="slider_ticks_legend" html-file="singleSlider"></show-code>
+  </article>
+
   <article>
     <h2>Slider with ticks and tooltips</h2>
     <rzslider

snippets/slider_ticks_legend.js

+$scope.slider = {
+  value: 5,
+  options: {
+    showTicksValues: true,
+    stepsArray: [
+      {value: 1, legend: 'Very poor'},
+      {value: 2},
+      {value: 3, legend: 'Fair'},
+      {value: 4},
+      {value: 5, legend: 'Average'},
+      {value: 6},
+      {value: 7, legend: 'Good'},
+      {value: 8},
+      {value: 9, legend: 'Excellent'}
+    ]
+  }
+};