Refactor slider to use JS lib and style

website/index.html

@@ -17,7 +17,8 @@
     <section class="generator">
       <div class="wrapper">
         <div class="seed-text"></div>
-        <input class="bits" type="range" min="128" max="256" step="32" value="256" />
+        <strong>Word Count</strong>
+        <div class="bit-slider"></div>
         <button class="regenerate-seed" type="button">Regenerate Seed</button>
       </div>
     </section>

website/index.js

@@ -1,6 +1,7 @@
 import 'babel-polyfill';
 import whenDomReady from 'when-dom-ready';
 import dogeSeed from '../';
+import noUiSlider from 'nouislider';
 
 const bitsToWords = {
   128: 12,
@@ -14,24 +15,33 @@ const main = async () => {
   await whenDomReady();
 
   const seedText = document.querySelector('.seed-text');
-  const bits = document.querySelector('.bits');
   const regenerateSeedButton = document.querySelector('.regenerate-seed');
 
+  const bitSlider = noUiSlider.create(document.querySelector('.bit-slider'), {
+    range: {min: 128, max: 256},
+    step: 32,
+    start: 256,
+    pips: {
+      mode: 'steps',
+      density: 1,
+      format: {to: bits => bitsToWords[bits]},
+      filter: (value, step) => step === 0 ? -1 : 1
+    }
+  });
+
   const generateSeed = () => {
-    const wordCount = bitsToWords[bits.value];
-    seedText.dataset.wordCount = wordCount;
+    const bits = Number(bitSlider.get());
+    const seedPhraseWords = dogeSeed(bits).split(' ');
 
-    const seedPhrase = dogeSeed(bits.value);
-    const wrappedSeedPhrase = seedPhrase
-      .split(' ')
-      .map(word => `<span>${word}</span>`)
-      .join(' ');
+    const wrappedSeedPhrase = seedPhraseWords.map(word => `<span>${word}</span>`).join(' ');
+    const wordCount = seedPhraseWords.length;
 
+    seedText.dataset.wordCount = wordCount;
     seedText.innerHTML = wrappedSeedPhrase;
   };
 
   regenerateSeedButton.addEventListener('click', generateSeed);
-  bits.addEventListener('input', generateSeed);
+  bitSlider.on('update', generateSeed);
 
   generateSeed();
 };

website/package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "babel-polyfill": "^6.26.0",
     "modern-normalize": "^0.5.0",
+    "nouislider": "^12.1.0",
     "when-dom-ready": "^1.2.12"
   }
 }

website/style.css

@@ -1,4 +1,5 @@
 @import 'modern-normalize';
+@import 'nouislider/distribute/nouislider.css';
 
 body {
   background: #f2ede0;
@@ -90,6 +91,20 @@ body {
   content: '';
 }
 
+.bit-slider {
+  max-width: 300px;
+  margin: 1em auto 3em;
+}
+
+.bit-slider .noUi-pips {
+  top: 8px;
+  pointer-events: none;
+}
+
+.bit-slider .noUi-pips .noUi-marker {
+  display: none;
+}
+
 .regenerate-seed {
   margin: 0 auto;
   padding: 0.6em 1em;

website/yarn.lock

@@ -3105,6 +3105,11 @@ normalize-url@^3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
   integrity sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==
 
+nouislider@^12.1.0:
+  version "12.1.0"
+  resolved "https://registry.yarnpkg.com/nouislider/-/nouislider-12.1.0.tgz#a4416b4b3357e77e52217f8ecf060eb14a855f59"
+  integrity sha512-SAOabF6hBm8201c6LDbkVOVhgwY49+/ms72ZLUF2qkN5RCf7FfUvEh/hGZ7XcwZHU+I/grlicPmcSk1/rrMnOw==
+
 npm-bundled@^1.0.1:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.0.5.tgz#3c1732b7ba936b3a10325aef616467c0ccbcc979"