Update renderer class

docs/50_Forms/Input.md

@@ -31,21 +31,22 @@ Content:
 
 Key      | Description
 ---      | ---
+hint     | optional: Hint text above form field
 label    | label in front of the input element
 name     | name attribute for sending form data
 value    | value of the input field/ visible text; for checkbox and radio: the data to send when sending a form
 
-### Example
+### Examples
 
 #### Simple text input field
 
 ```php
-$renderAdminLTE->getFormInput(array (
+$renderAdminLTE->getFormInput([
   'label' => 'Enter firstname',
   'type' => 'text',
   'name' => 'firstname',
   'value' => '',
-));
+]);
 ```
 
 You get a label, an input field wrapped in a ``<div class="form-group row">``.
@@ -72,8 +73,6 @@ With using append and prepend keys you can create gray boxes on left and right.
 For these input types you can use multiple elements.
 You must wrap a bunch of input elements into ``<div class="form-group row">`` "manually".
 
-
-
 ```php
 echo '<div class="form-group">'
   . $renderAdminLTE->getFormInput([
@@ -91,3 +90,60 @@ echo '<div class="form-group">'
   .'</div>'
   ;
 ```
+
+#### Simple range slider
+
+A simple slider:
+
+```php
+$renderAdminLTE->getFormInput([
+  'tag' => 'input', 
+  'type' => 'range', // <-----------
+  'min' => 0, 
+  'max' => 3, 
+  'step' => 1, 
+  'label' => 'Select 0..6',
+]);
+```
+
+#### Range with labels
+
+To add labels you need a datalist for the values and the labels to show, eg
+
+```html
+<datalist id="datalist-range">
+  <option value="0" label="no risc"></option>
+  <option value="1" label="1"></option>
+  <option value="2" label="2"></option>
+  <option value="3" label="medium"></option>
+  <option value="4" label="4"></option>
+  <option value="5" label="5"></option>
+  <option value="6" label="critical"></option>
+</datalist>
+```
+
+The id you ned to reference in the key "datalist":
+
+```php
+$renderAdminLTE->getFormInput([
+  'tag' => 'input', 
+  'type' => 'range', 
+  'min' => 0, 
+  'max' => 6, 
+  'step' => 1, 
+  'label' => 'Select 0..6',
+  'datalist' => 'datalist-range', // <-----------
+]);
+```
+
+For the datalist you need to extend your css:
+
+```css
+datalist {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  writing-mode: vertical-lr;
+  width: 100%;
+}
+```