remove rzslider in favor or native input range

gulpfile.js

@@ -93,10 +93,6 @@ gulp.task('lib', ['clean:lib'], function () {
             src: paths.npmDir + 'ngclipboard/dist/ngclipboard.js',
             dest: paths.libDir + 'ngclipboard'
         },
-        {
-            src: paths.npmDir + 'angularjs-slider/dist/rzslider.js',
-            dest: paths.libDir + 'angularjs-slider'
-        },
         {
             src: paths.npmDir + 'clipboard/dist/clipboard.js',
             dest: paths.libDir + 'clipboard'

package.json

@@ -22,7 +22,6 @@
     "merge-stream": "1.0.1",
     "angular-toastr": "2.1.1",
     "q": "1.5.0",
-    "angularjs-slider": "6.1.1",
     "sweetalert": "1.1.3",
     "angular-sweetalert": "1.1.2",
     "angulartics": "1.4.0",

src/popup/app/tools/toolsModule.js

@@ -1,2 +1,2 @@
 angular
-    .module('bit.tools', ['ngAnimate', 'ngclipboard', 'toastr', 'rzModule', 'oitozero.ngSweetAlert']);
+    .module('bit.tools', ['ngAnimate', 'ngclipboard', 'toastr', 'oitozero.ngSweetAlert']);

src/popup/app/tools/toolsPasswordGeneratorController.js

@@ -12,32 +12,22 @@
         utilsService.initListSectionItemListeners($(document), angular);
         $scope.password = '-';
 
-        $scope.slider = {
-            value: 12,
-            options: {
-                floor: 5,
-                ceil: 128,
-                step: 1,
-                hideLimitLabels: true,
-                hidePointerLabels: true,
-                onChange: function () {
-                    $scope.options.length = $scope.slider.value;
-                    $scope.regenerate(false);
-                },
-                onEnd: function () {
-                    $analytics.eventTrack('Generated Password');
-                    $scope.saveOptions($scope.options);
-                }
-            }
-        };
-
         $q.when(passwordGenerationService.getOptions()).then(function (options) {
             $scope.options = options;
-            $scope.slider.value = options.length;
             $scope.regenerate(false);
             $analytics.eventTrack('Generated Password');
         });
 
+        $scope.sliderMoved = function () {
+            $scope.regenerate(false);
+        };
+
+        $('#length').change(function (e) {
+            e.preventDefault();
+            $analytics.eventTrack('Generated Password');
+            $scope.saveOptions($scope.options);
+        });
+
         $scope.regenerate = function (trackRegenerateEvent) {
             if (trackRegenerateEvent) {
                 $analytics.eventTrack('Regenerated Password');

src/popup/app/tools/views/tools.html

@@ -5,7 +5,7 @@
     <div class="list">
         <div class="list-section">
             <div class="list-section-items">
-                <a class="list-section-item wrap" href="" ui-sref="passwordGenerator({animation: 'in-slide-up'})">
+                <a class="list-section-item wrap" ui-sref="passwordGenerator({animation: 'in-slide-up'})">
                     <span class="leading-icon" style="color: #eba776;"><i class="fa fa-refresh fa-fw"></i></span>
                     <span class="text">{{i18n.passGen}}</span>
                     <span class="detail">{{i18n.passGenInfo}}</span>
@@ -35,7 +35,7 @@
                     <span class="text">{{i18n.importLogins}}</span>
                     <span class="detail">{{i18n.importLoginsInfo}}</span>
                 </a>
-                <a class="list-section-item wrap" href="" ui-sref="export({animation: 'in-slide-up'})">
+                <a class="list-section-item wrap" ui-sref="export({animation: 'in-slide-up'})">
                     <span class="leading-icon" style="color: #ff6f6f;"><i class="fa fa-cloud-download fa-fw"></i></span>
                     <span class="text">{{i18n.exportVault}}</span>
                     <span class="detail">{{i18n.exportVaultInfo}}</span>

src/popup/app/tools/views/toolsPasswordGenerator.html

@@ -30,9 +30,11 @@
             <div class="list-section-items">
                 <div class="list-section-item list-section-item-slider">
                     <label for="length">{{i18n.length}}</label>
-                    <span class="slider-value">{{slider.value}}</span>
+                    <span class="slider-value">{{options.length}}</span>
-                    <rzslider rz-slider-model="slider.value"
+                    <div class="slider-wrapper">
-                              rz-slider-options="slider.options"></rzslider>
+                        <input id="length" type="range" min="5" max="128" step="1" ng-model="options.length"
+                               ng-change="sliderMoved()">
+                    </div>
                 </div>
                 <div class="list-section-item list-section-item-checkbox">
                     <label for="uppercase">A-Z</label>

src/popup/index.html

@@ -25,7 +25,6 @@
     <script src="../lib/ngclipboard/ngclipboard.js"></script>
     <script src="../lib/sweetalert/sweetalert-dev.js"></script>
     <script src="../lib/sweetalert/SweetAlert.js"></script>
-    <script src="../lib/angularjs-slider/rzslider.js"></script>
     <script src="../lib/angulartics/angulartics.js"></script>
     <script src="../lib/angulartics/angulartics-ga.js"></script>
     <script src="../lib/ng-infinite-scroll/ng-infinite-scroll.js"></script>

src/popup/less/components.less

@@ -409,10 +409,24 @@
         &.list-section-item-slider {
             .slider-value {
                 color: @gray-light;
-
+                text-align: right;
-                &:before {
+                min-width: 45px;
-                    content: "\00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0";
             }
+
+            > * {
+                display: table-cell !important;
+                vertical-align: middle;
+            }
+
+            input {
+                width: 100%;
+                margin: 0;
+            }
+
+            .slider-wrapper {
+                width: 100%;
+                padding: 0 0 0 20px;
+                max-width: 500px;
             }
         }
 

src/popup/less/plugins.less

@@ -1,21 +1,4 @@
 @import (reference) "variables.less";
-@import "../../../node_modules/angularjs-slider/src/rzslider.less";
-
-/* Slider */
-
-@handleSize: 15px;
-@barDimension: 2px;
-@handleBgColor: @brand-primary;
-@handleInnerColor: @handleBgColor;
-@handleActiveColor: @handleBgColor;
-@handleHoverColor: @handleBgColor;
-@barNormalColor: @border-color-dark;
-
-.list-section-item-slider .rzslider {
-    width: 160px;
-    margin: 9px 0 0 5px;
-    float: right;
-}
 
 /* Toastr */