form add

src/_blocks_library.html

@@ -389,8 +389,15 @@
             <div class="field-range">
               <div class="field-range__name">Range</div>
               <div class="field-range__input-wrap">
-                <input class="field-range__input" type="range">
-                <div class="field-range__help-text">Нативный, без JS.</div>
+                <input class="field-range__input" type="range"  min"1" max="100" step="5" value="60">
+                <div class="field-range__help-text"><code>min"1" max="100" step="5" value="60"</code>, стилизован без JS.</div>
+              </div>
+            </div>
+            <div class="field-range">
+              <div class="field-range__name">Range</div>
+              <div class="field-range__input-wrap">
+                <input class="field-range__input" type="range"  min"0" max="80" step="10" value="20">
+                <div class="field-range__help-text"><code>min"0" max="80" step="10" value="20"</code>, стилизован без JS.</div>
               </div>
             </div>
             <div class="field-file">

src/js/script.js

@@ -4,16 +4,16 @@
 
 /*
   Форма: работа стилизованного input[type="file"]
-  Автор: Osvaldas Valutis, www.osvaldas.info
+  Автор: Osvaldas Valutis, www.osvaldas.info (адаптировано под используемую разметку)
   Available for use under the MIT License
 */
 
-;( function ( document, window, index )
+;( function ()
 {
   var inputs = document.querySelectorAll( '.field-file__input' );
   Array.prototype.forEach.call( inputs, function( input )
   {
-    var label  = input.nextElementSibling,
+    var label  = input.closest('.field-file').querySelector( '.field-file__name-text' ),
         labelVal = label.innerHTML;
 
     input.addEventListener( 'change', function( e ) {
@@ -33,10 +33,30 @@
       }
     });
   });
-}( document, window, 0 ));
+}());
+
+
+
+/*
+  Поиск ближайшего родителя по селектору
+  https://github.com/oneuijs/You-Dont-Need-jQuery/blob/master/README-ru.md#1.6
+*/
+
+function closest(el, selector) {
+  const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
+
+  while (el) {
+    if (matchesSelector.call(el, selector)) {
+      return el;
+    } else {
+      el = el.parentElement;
+    }
+  }
+  return null;
+}
 
 
 
 // $(document).ready(function() {
-//   alert('fuck jQuery');
+//   alert('You Dont Need jQuery');
 // });

src/less/blocks/field-range.less

@@ -8,7 +8,9 @@
     margin-bottom: round(@line-height / 4, 2);
   }
 
-  &__input-wrap {}
+  &__input-wrap {
+    position: relative;
+  }
 
   &__input {
     margin-bottom: round(@line-height / 3, 2);

src/less/global_scaffolding.less

@@ -88,6 +88,7 @@ a {
 
 img {
   max-width: 100%;
+  height: auto;
   border: 0;
 }