@progressive-development/pd-forms 0.1.13 → 0.1.15

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent pd-forms following open-wc recommendations",
   "license": "SEE LICENSE IN LICENSE",
   "author": "PD Progressive Development",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "main": "index.js",
   "module": "index.js",
   "scripts": {

package/src/PdBaseUiInput.js

@@ -203,9 +203,9 @@ import { SharedInputStyles } from './shared-input-styles.js';
       ` : '';
     }
 
-    _renderLabel(forParam) {
+    _renderLabel(forParam, additionalValue) {
         return html`
-            <label for="${forParam}">${this.label}${this.required && this.label ? this.defaultRequiredChar : ''}</label>
+            <label for="${forParam}">${this.label}${this.required && this.label ? this.defaultRequiredChar : ''}${additionalValue ? html` - <b>${additionalValue}</b>` : ''}</label>
         `;
     }
 

package/src/PdFormContainer.js

@@ -12,6 +12,8 @@
 import { html, css } from 'lit';
 import { msg } from '@lit/localize';
 
+import { INPUT_TYPE_RANGE } from './PdBaseUiInput.js';
+
 import { PdBaseUI } from './PdBaseUi.js';
 
 /**
@@ -102,7 +104,10 @@ export class PdFormContainer extends PdBaseUI {
     reqEl.forEach(el => {
       const tmpEl = el;
 
-      if (!el.value || el.value === "" || el.value === "false") {
+      console.log("Check EL: ", el._inputType, el.value);
+
+      if (!el.value || el.value === "" || el.value === "false" || 
+          (el._inputType === INPUT_TYPE_RANGE && el.value === '0')) {
         const erMsg = el.requiredMsg || msg('Eingabe erforderlich',{desc: '#pd.form.field.required#'});
         if (!e.detail.singleElement || e.detail.singleElement === el) {
           tmpEl.errorMsg = erMsg;

package/src/PdRange copy.js

@@ -0,0 +1,197 @@
+/**
+ * @license
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
+ */
+
+import { html, css } from 'lit';
+
+import { PdBaseUIInput, INPUT_TYPE_RANGE } from './PdBaseUiInput.js';
+
+
+export class PdRange extends PdBaseUIInput {
+
+    static get properties() {
+        return {
+          min: { type: String },
+          max: { type: String },
+          step: { type: Number},
+          showLegend: { type: Boolean }
+        };
+    }
+
+    constructor() {
+      super();
+      this._inputType = INPUT_TYPE_RANGE;
+      this.step = 0.1;
+      this.showLegend = false;
+    }
+
+    static get styles() {
+        return [
+          css`
+          input[type=range] {
+            -webkit-appearance: none;
+            margin: 0;
+            width: 100%;
+            background-color: var(--my-background-color);
+            padding: var(--squi-input-padding, .5rem);
+            height: var(--my-input-height);
+            box-sizing: border-box;
+          }
+          input[type=range]:focus {
+            outline: none;
+          }
+          input[type=range]::-webkit-slider-runnable-track {
+            width: 100%;
+            cursor: pointer;
+            box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+            background: linear-gradient(-90deg, rgba(var(--my-lighter-background-color), .8) 25%, rgba(var(--my-darker-background-color), 1));
+            border-radius: 3px;
+            border: 0px solid #000101;
+          }
+          input[type=range]::-webkit-slider-thumb {
+            box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+            border: 0px solid #000000;
+            height: 20px;
+            width: 39px;
+            border-radius: 3px;
+            background: var(--my-primary-color);
+            cursor: pointer;
+            -webkit-appearance: none;
+            margin-top: -3.6px;
+          }
+          input[type=range]:focus::-webkit-slider-runnable-track {
+            background: linear-gradient(-90deg, rgba(var(--my-lighter-background-color), .8) 25%, rgba(var(--my-darker-background-color), 1));
+          }
+          input[type=range]::-moz-range-track {
+            width: 100%;
+            height: 12.8px;
+            cursor: pointer;
+            animation: 0.2s;
+            box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+            background: linear-gradient(-90deg, rgba(var(--my-lighter-background-color), .8) 25%, rgba(var(--my-darker-background-color), 1));
+            border-radius: 3px;
+            border: 0px solid #000101;
+          }
+          input[type=range]::-moz-range-thumb {
+            box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+            border: 0px solid #000000;
+            height: 20px;
+            width: 39px;
+            border-radius: 3px;
+            background: var(--my-primary-color);
+            cursor: pointer;
+          }
+          input[type=range]::-ms-track {
+            width: 100%;
+            height: 12.8px;
+            cursor: pointer;
+            animation: 0.2s;
+            background: transparent;
+            border-color: transparent;
+            border-width: 39px 0;
+            color: transparent;
+          }
+          input[type=range]::-ms-fill-lower {
+            background: linear-gradient(-90deg, rgba(var(---my-lighter-background-color), .8) 25%, rgba(var(--my-darker-background-color), 1));
+            border: 0px solid #000101;
+            border-radius: 7px;
+            box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+          }
+          input[type=range]::-ms-fill-upper {
+            background: linear-gradient(-90deg, rgba(var(--my-lighter-background-color), .8) 25%, rgba(var(--my-darker-background-color), 1));
+            border: 0px solid #000101;
+            border-radius: 7px;
+            box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+          }
+          input[type=range]::-ms-thumb {
+            box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+            border: 0px solid #000000;
+            height: 20px;
+            width: 39px;
+            border-radius: 3px;
+            background: var(--my-primary-color);
+            cursor: pointer;
+          }
+          :host label.value {
+            flex: 0 1 10%;
+          }
+          input[type=range]:focus::-ms-fill-lower {
+            background: linear-gradient(-90deg, rgba(var(--my-lighter-background-color), .8) 25%, rgba(var(--my-darker-background-color), 1));
+          }
+          input[type=range]:focus::-ms-fill-upper {
+            background: linear-gradient(-90deg, rgba(var(--my-lighter-background-color), .8) 25%, rgba(var(--my-darker-background-color), 1));
+          }
+          .legend {
+            display: flex;
+            /*margin: 0 -1rem;*/
+          }
+          .legend label {
+            text-align: center;
+            position: relative;
+          }
+          .legend label::before {
+            background-color: rgb(var(--my-lighter-background-color));
+            content: "";
+            height: .5rem;
+            position: absolute;
+            left: 50%;
+            top: -.5rem;
+            width: 1px;
+          }
+          .range_legend_label--selected {
+            color: var(--my-primary-color);
+          }
+          /* TODO remove to specific */
+          .range_legend_label--selected::after{
+              content: '';
+              position: absolute;
+              left: 20%;
+              top: 100%;
+              width: 0;
+              height: 0;
+              border-left: 20px solid transparent;
+              border-right: 20px solid transparent;
+              border-bottom: 20px solid rgb(var(--my-lighter-background-color));
+          }
+          `
+        ];
+    }
+
+    render() {
+        // TODO: step kann hier nicht übergeben werden, wird dann initial nicht immer richtig angezeigt (bei komma rundungen)???
+        return html`
+            <label for="${this.id}Input">${this.label} ${this.showLegend ? '' : html`- ${this.value}`}</label>
+            <input ?disabled=${this.disabled} type="range" name="${this.id}Name" @change="${this._onChange}" 
+                   .value="${this.value}" min="${this.min}" max="${this.max}" 
+                   step="${this.step}" id="${this.id}Input">
+            ${this.showLegend ? this._addLegend() : ''}            
+        `;
+    }
+
+    firstUpdated() {
+      // Save input reference for performance
+      this._input = this.shadowRoot.querySelector('input');
+    }
+
+    _addLegend() {
+      const steps = this.max - this.min;
+      const labels = [];
+      for (let i = 0; i <= steps; i+=1) {
+        labels.push(html`<label class="${i + this.step === this.value * 1 ? 'range_legend_label--selected' : ''}">${i + this.step}</label>`);
+      }
+      return html`<div class="legend">${labels}</div>`
+    }
+
+    _onChange() {
+      this.value = this._input.value;
+      this.dispatchEvent(new CustomEvent('changed', {
+        detail: { 
+          value: this._input.value
+        },
+        composed: true,
+        bubbles: true
+      }));
+    }
+
+}

package/src/PdRange.js

@@ -4,10 +4,10 @@
  */
 
 import { html, css } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
 
 import { PdBaseUIInput, INPUT_TYPE_RANGE } from './PdBaseUiInput.js';
 
-
 export class PdRange extends PdBaseUIInput {
 
     static get properties() {
@@ -15,157 +15,205 @@ export class PdRange extends PdBaseUIInput {
           min: { type: String },
           max: { type: String },
           step: { type: Number},
-          showLegend: { type: Boolean }
+          optionValueMapper: { type: Object },
         };
     }
 
     constructor() {
       super();
       this._inputType = INPUT_TYPE_RANGE;
-      this.step = 0.1;
-      this.showLegend = false;
+      this.step = 1;
+      this.optionValueMapper = {};
     }
 
     static get styles() {
-        return [
-          css`
+      return [
+        PdBaseUIInput.styles,
+        css`      
+
+         /* Link: 
+          * css styling:        - https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ 
+          * no-empty-default    - https://stackoverflow.com/questions/40302515/is-there-a-way-to-set-default-value-of-range-input-to-be-empty
+          * => Könnte ich vlt. mit dummy element lösen => Kein Wert => Dummy wird angezeigt => Bei Klick wird Wert gesetzt und PdRange angezeigt. Oder doch Vorschlag aus StackOverflow => -1 als default Wert => Kein gesetzer Wert
+          * Style Ticks/Lables: - https://stackoverflow.com/questions/26612700/ticks-for-type-range-html-input
+          */
+
+          /****************************************************
+           * Style for SLIDER                                 *           
+           ****************************************************/
+
           input[type=range] {
-            -webkit-appearance: none;
-            margin: 0;
-            width: 100%;
-            background-color: var(--my-background-color);
-            padding: var(--squi-input-padding, .5rem);
-            height: var(--my-input-height);
+            -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
+            width: var(--pd-input-field-width, 250px); /* Specific width is required for Firefox. */
+            background: transparent; /* Otherwise white in Chrome */
+
+            background-color: var(--pd-range-bg-col, var(--pd-default-col));
+            padding: 0.5rem;
+            height: var(--pd-input-field-height, 2.2rem);
             box-sizing: border-box;
+
+            border-radius: 0.75rem;
           }
+
           input[type=range]:focus {
-            outline: none;
+            /* Removes the blue border. 
+             * You should probably do some kind of focus styling for accessibility reasons though. */
+            outline: none; 
           }
-          input[type=range]::-webkit-slider-runnable-track {
-            width: 100%;
+
+          /****************************************************
+           * Style for THUMBS specific for different browser  *
+           * Check: Possible to extract common definitions?   *
+           * =>  Note that while we’re repeating code here,   *
+           *     that’s necessary as you can’t comma-separate *
+           *     these type of selectors. Browsers will drop  * 
+           *     the entire selector if it doesn’t understand *
+           *     a part of it.                                *
+           ****************************************************/
+
+          /**
+           * Standard/Chrome thumb definition.
+           */
+          input[type=range]::-webkit-slider-thumb {
+            /* Hide the standard thumb element */
+            -webkit-appearance: none;                                                
+            /*margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
+            margin-top: -6px; /* squi.cards value */
+
+            /* redundant, check if it is possible to extract common definitions */
             cursor: pointer;
-            box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
-            background: linear-gradient(-90deg, rgba(var(--my-lighter-background-color), .8) 25%, rgba(var(--my-darker-background-color), 1));
+            height: 20px;
+            width: 39px;
+            background: var(--pd-range-thumb-col, var(--pd-default-hover-col));
+            border: 1px solid var(--pd-default-dark-col);
             border-radius: 3px;
-            border: 0px solid #000101;
+            box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
           }
-          input[type=range]::-webkit-slider-thumb {
-            box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
-            border: 0px solid #000000;
+
+          /**
+           * Firefox thumb definition.
+           */
+          input[type=range]::-moz-range-thumb {
+            /* redundant, check if it is possible to extract common definitions */
+            cursor: pointer;
             height: 20px;
             width: 39px;
+            background: var(--pd-range-thumb-col, var(--pd-default-hover-col));
+            border: 1px solid var(--pd-default-dark-col);
             border-radius: 3px;
-            background: var(--my-primary-color);
+            box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+          }
+
+          /**
+           * IE Thum definiton.
+           */
+          input[type=range]::-ms-thumb {
+            /* redundant, check if it is possible to extract common definitions */
             cursor: pointer;
-            -webkit-appearance: none;
-            margin-top: -3.6px;
+            height: 20px;
+            width: 39px;
+            background: var(--pd-range-thumb-col, var(--pd-default-hover-col));
+            border: 1px solid var(--pd-default-dark-col);
+            border-radius: 3px;
+            box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
           }
+
+
+          /****************************************************
+           * Style for TRACK specific for different browser  *
+           * (see thumbs styles)                              *
+           ****************************************************/
+
+          /**
+           * Standard/Chrome track definition.
+           */
+          input[type=range]::-webkit-slider-runnable-track {
+            width: 100%;
+            height: 8.4px;
+            cursor: pointer;
+            box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+            background: var(--pd-range-track-col, var(--pd-default-light-col));            
+            border: 0.2px solid #010101;
+
+            border-radius: 0.75rem;
+          }
+
           input[type=range]:focus::-webkit-slider-runnable-track {
-            background: linear-gradient(-90deg, rgba(var(--my-lighter-background-color), .8) 25%, rgba(var(--my-darker-background-color), 1));
+            background: var(--pd-range-track-hover-col, var(--pd-default-light-col));
+            border: 0.2px solid var(--pd-default-hover-col);
           }
+
+          /**
+           * Firefox track definition.
+           */
           input[type=range]::-moz-range-track {
             width: 100%;
-            height: 12.8px;
-            cursor: pointer;
-            animation: 0.2s;
-            box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
-            background: linear-gradient(-90deg, rgba(var(--my-lighter-background-color), .8) 25%, rgba(var(--my-darker-background-color), 1));
-            border-radius: 3px;
-            border: 0px solid #000101;
-          }
-          input[type=range]::-moz-range-thumb {
-            box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
-            border: 0px solid #000000;
-            height: 20px;
-            width: 39px;
-            border-radius: 3px;
-            background: var(--my-primary-color);
+            height: 8.4px;
             cursor: pointer;
+            box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+            background: var(--pd-range-track-col, var(--pd-default-light-col));
+            border-radius: 0.75rem;
+            border: 0.2px solid #010101;
           }
+
+          /**
+           * IE track definition.
+           * Check: Why are they different.
+           */
           input[type=range]::-ms-track {
+
+            height: 8.4px;
             width: 100%;
-            height: 12.8px;
             cursor: pointer;
-            animation: 0.2s;
-            background: transparent;
+
+            /* Hides the slider so custom styles can be added */
+            background: transparent; 
             border-color: transparent;
-            border-width: 39px 0;
             color: transparent;
+
+            border-width: 16px 0;
           }
           input[type=range]::-ms-fill-lower {
-            background: linear-gradient(-90deg, rgba(var(---my-lighter-background-color), .8) 25%, rgba(var(--my-darker-background-color), 1));
-            border: 0px solid #000101;
-            border-radius: 7px;
-            box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
-          }
-          input[type=range]::-ms-fill-upper {
-            background: linear-gradient(-90deg, rgba(var(--my-lighter-background-color), .8) 25%, rgba(var(--my-darker-background-color), 1));
-            border: 0px solid #000101;
-            border-radius: 7px;
-            box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
-          }
-          input[type=range]::-ms-thumb {
-            box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
-            border: 0px solid #000000;
-            height: 20px;
-            width: 39px;
-            border-radius: 3px;
-            background: var(--my-primary-color);
-            cursor: pointer;
-          }
-          :host label.value {
-            flex: 0 1 10%;
+            background: var(--pd-range-track-col, var(--pd-default-light-col));
+            border: 0.2px solid #010101;            
+            border-radius: 0.75rem;
+            box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
           }
           input[type=range]:focus::-ms-fill-lower {
-            background: linear-gradient(-90deg, rgba(var(--my-lighter-background-color), .8) 25%, rgba(var(--my-darker-background-color), 1));
-          }
-          input[type=range]:focus::-ms-fill-upper {
-            background: linear-gradient(-90deg, rgba(var(--my-lighter-background-color), .8) 25%, rgba(var(--my-darker-background-color), 1));
-          }
-          .legend {
-            display: flex;
-            /*margin: 0 -1rem;*/
-          }
-          .legend label {
-            text-align: center;
-            position: relative;
-          }
-          .legend label::before {
-            background-color: rgb(var(--my-lighter-background-color));
-            content: "";
-            height: .5rem;
-            position: absolute;
-            left: 50%;
-            top: -.5rem;
-            width: 1px;
+            background: #3071a9;
           }
-          .range_legend_label--selected {
-            color: var(--my-primary-color);
+          input[type=range]::-ms-fill-upper {
+            background: var(--pd-range-track-col, var(--pd-default-light-col));
+            border: 0.2px solid #010101;
+            border-radius: 0.75rem;
+            box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
           }
-          /* TODO remove to specific */
-          .range_legend_label--selected::after{
-              content: '';
-              position: absolute;
-              left: 20%;
-              top: 100%;
-              width: 0;
-              height: 0;
-              border-left: 20px solid transparent;
-              border-right: 20px solid transparent;
-              border-bottom: 20px solid rgb(var(--my-lighter-background-color));
+          input[type=range]:focus::-ms-fill-upper {
+            background: #367ebd;
           }
           `
         ];
     }
 
     render() {
-        // TODO: step kann hier nicht übergeben werden, wird dann initial nicht immer richtig angezeigt (bei komma rundungen)???
-        return html`
-            <label for="${this.id}Input">${this.label} ${this.showLegend ? '' : html`- ${this.value}`}</label>
-            <input ?disabled=${this.disabled} type="range" name="${this.id}Name" @change="${this._onChange}" 
-                   .value="${this.value}" min="${this.min}" max="${this.max}" 
-                   step="${this.step}" id="${this.id}Input">
-            ${this.showLegend ? this._addLegend() : ''}            
+      const inputId = `${this.id}Range`;
+      // TODO: step kann hier nicht übergeben werden, wird dann initial nicht immer richtig angezeigt (bei komma rundungen)???
+      return html`
+        ${this._renderLabel(inputId, this.optionValueMapper[this.value] || this.value)}
+        <div class="input-range ${classMap({ error: this.errorMsg.length > 0 })}">
+          <input 
+            id="${inputId}"
+            name="${this.name || this.valueName}"
+            class="input-range-style ${this.gradient ? 'gradient' : ''}"
+            type="range"
+            .value="${this.value}"
+            ?readonly="${this.readonly}"
+            ?disabled="${this.disabled}"
+            min="0" max="${this.max}" step="1"
+            @change="${this._onChange}"
+          />
+        </div>
+        ${this._renderErrorMsg()}
         `;
     }
 
@@ -174,24 +222,8 @@ export class PdRange extends PdBaseUIInput {
       this._input = this.shadowRoot.querySelector('input');
     }
 
-    _addLegend() {
-      const steps = this.max - this.min;
-      const labels = [];
-      for (let i = 0; i <= steps; i+=1) {
-        labels.push(html`<label class="${i + this.step === this.value * 1 ? 'range_legend_label--selected' : ''}">${i + this.step}</label>`);
-      }
-      return html`<div class="legend">${labels}</div>`
-    }
-
-    _onChange() {
-      this.value = this._input.value;
-      this.dispatchEvent(new CustomEvent('changed', {
-        detail: { 
-          value: this._input.value
-        },
-        composed: true,
-        bubbles: true
-      }));
+    _onChange(e) {
+      this._handleChangedValue(this._input.value, e, false);
     }
 
 }

package/stories/form-container.stories.js

@@ -2,6 +2,7 @@ import { html } from 'lit';
 import '../pd-form-container.js';
 import '../pd-form-row.js';
 import '../pd-input.js';
+import '../pd-range.js';
 
 export default {
   title: 'PdForms/Form Container',
@@ -9,6 +10,14 @@ export default {
   argTypes: {},
 };
 
+const OPTIONS_GENRE = {
+  0: "Keine Auswahl",
+  1: "No-Go",
+  2: "Wenig",
+  3: "Mittel",
+  4: "Viel",
+};
+
 function Template() {
   return html`
     <h3>Mit Forms</h3>
@@ -55,7 +64,14 @@ function Template() {
         <pd-input-area class="quarter2-area" id="test17Id" label="Label Area" required></pd-input-area>
         <pd-input-area class="quarter2-area" id="test18Id" label="Label Area" required
           requiredMsg="Das ist eine richtig lange Fehlermeldung. Diese kann per Parameter für spezielle Felder wie die AGB Checkbox gesetzt werden."></pd-input-area>
-      </pd-form-row>      
+      </pd-form-row>
+      <pd-form-row>
+        <pd-range id="testRangeId"
+          label="Range Label" 
+          max="12"
+          value="0" .optionValueMapper="${OPTIONS_GENRE}" required>
+        </pd-range>
+      </pd-form-row>
     </pd-form-container>
 
     <h2>Test Validation</h2>

package/stories/range.stories.js

@@ -1,5 +1,7 @@
 import { html } from 'lit';
 import '../pd-range.js';
+import '../pd-form-container.js';
+import '../pd-form-row.js';
 
 export default {
   title: 'PdForms/Range',
@@ -17,54 +19,41 @@ export default {
   },
 };
 
-function Template({
-  primaryColor,
-  secondaryColor,
-  textColor,
-  highlightColor,
-  errorColor,
-  errorBackgroundColor,
-  borderRadius,
-  displayFont,
-  fontSize,
-}) {
-  let style = '';
-  if (primaryColor) {
-    style += `--squi-primary-color:${primaryColor};`;
-  }
-  if (secondaryColor) {
-    style += `--squi-secondary-color:${secondaryColor};`;
-  }
-  if (textColor) {
-    style += `--squi-text-color:${textColor};`;
-  }
-  if (highlightColor) {
-    style += `--squi-highlight-color:${highlightColor};`;
-  }
-  if (errorColor) {
-    style += `--squi-error-color:${errorColor};`;
-  }
-  if (errorBackgroundColor) {
-    style += `--squi-error-background-color:${errorBackgroundColor};`;
-  }
-  if (borderRadius) {
-    style += `--squi-border-radius:${borderRadius};`;
-  }
-  if (displayFont) {
-    style += `--squi-display-font:${displayFont};`;
-  }
-  if (fontSize) {
-    style += `--squi-font-size:${fontSize};`;
-  }
+const OPTIONS_GENRE = {
+  0: "Keine Auswahl",
+  1: "No-Go",
+  2: "Wenig",
+  3: "Mittel",
+  4: "Viel",
+};
+
+
+function Template() {
   return html`
     <h3>Default Input Range</h3>  
-    <pd-range id="testRangeId"
-      style="${style}"
-      label="Range auswählen" 
-      min="1" max="12" step="1"
-      defaultValue="6"
-      showLegend>
-    </pd-range>
+    <pd-form-container id="testFormContainerId" requiredFieldInfo>
+      <pd-form-row>
+        <pd-range id="range5060Id"
+              class="quarter4"
+              label="50er/60er" 
+              required
+              max="4"
+              value="0"
+              .optionValueMapper="${OPTIONS_GENRE}">
+        </pd-range>
+      </pd-form-row>
+    </pd-form-container>
+
+    <h2>Test Validation</h2>
+      <button
+      @click="${() => {
+        document.getElementById('testFormContainerId').dispatchEvent(
+          new CustomEvent("validate-form", {detail: {errorMap: new Map()}})
+        );
+      }}"
+      >
+        Test Validate
+      </button>
   `;
 }