done with gui mockup

dist/leaflet-itracer-control.css

+.itracer-control .chevron-title {
+    border: 1px solid #ddd;
+	border-radius: 0px;
+    padding-top: 7px;	
+    padding-bottom: 7px;	
+    padding-left: 10px;	
+    padding-right: 10px;
+	font-size: 12px;	
+	margin-bottom: 2px;
+}
+
+.itracer-control .uk-button.uk-active {
+    box-shadow: inset 0 0 5px rgba(0,0,0,.05);
+    background-color: #ddd;
+    font-weight: 600;
+}
+
+.itracer-control .irs-from {
+    background-color: #ddd;
+    color: black;
+}
+
+.itracer-control .irs-to {
+    background-color: #ddd;
+    color: black;
+}
+
+.itracer-control .irs-slider.from {
+    display: none;
+}
+
+.itracer-control .irs-slider.to {
+    display: none;
+}
+
+
+.itracer-control .next-enabled {
+    box-shadow: inset 0 0 5px rgba(0,0,0,.05);
+    text-shadow: 0 -1px 0 rgba(0,0,0,.1);
+    background-color: #8cc14c;
+    color: #fff;
+}
+
+.itracer-control .irs-disabled {
+    opacity: 1;
+}
+
+.itracer-control .uk-dropdown-small {
+    min-width: 100px
+}
+.itracer-control .uk-autocomplete {
+    width: 100px
+}
+
+.itracer-control .form-label {
+  display: inline-block;
+  padding-right: 5px;
+}
+
+.itracer-control .badge-neutral {
+    background: lightgray;
+}
+
+.itracer-control .percentage {
+    width: 65px;
+}
+
+.itracer-control .title {
+    padding-left: 5px;
+}
+
+.itracer-control .chevron-icon {
+    float: right;
+    margin-top: 4px;
+	margin-right: 3px;
+}
+
+.itracer-control .select {
+    display: inline-block;
+	margin-left: 3px;
+}
+
+
+.itracer-control .acc-content {
+    padding-top: 0px;
+    padding-bottom: 15px;
+}
+
+.introjs-helperLayer {
+    background-color: rgba(255,255,255,0);
+}
+
+.introjs-prevbutton {
+    display: none;
+}
+
+.itracer-control .legend-text {
+    display: inline-block;
+    position: relative;
+    left: 5px;    
+}
+
+.itracer-control .legend-box {
+    display: inline-block;
+    top: 1px;
+    position: relative;    
+}

src/leaflet-itracer-control.js

@@ -41,6 +41,7 @@ var L;
                 self.cardMap[periodid] = new STWkit.PeriodCard(periodid, 'Simulation period', this.accordionDiv, self.lang, map, self.domain, self.forcingmodel);
                 var spreadingid = self.initials + 'distributionCard';
                 self.cardMap[spreadingid] = new ITSpreading(spreadingid, 'Spreading', this.accordionDiv, self.lang, map);
+                self.cardMap[locationid].addChangeFnListener(self.cardMap[spreadingid]);
                 _super.prototype.setup.call(this, map);
                 var chain = [];
                 chain[locationid] = periodid;

src/leaflet-itracer-control.js.map

-{"version":3,"file":"leaflet-itracer-control.js","sourceRoot":"","sources":["leaflet-itracer-control.ts"],"names":[],"mappings":"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"}
\ No newline at end of file
+{"version":3,"file":"leaflet-itracer-control.js","sourceRoot":"","sources":["leaflet-itracer-control.ts"],"names":[],"mappings":"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"}
\ No newline at end of file

src/leaflet-itracer-control.ts

@@ -44,6 +44,7 @@ module L.Control {
             self.cardMap[periodid] = new STWkit.PeriodCard(periodid, 'Simulation period', this.accordionDiv, self.lang, map, self.domain, self.forcingmodel);
             var spreadingid = self.initials+'distributionCard';
             self.cardMap[spreadingid] = new ITSpreading(spreadingid, 'Spreading', this.accordionDiv, self.lang, map);
+            self.cardMap[locationid].addChangeFnListener(self.cardMap[spreadingid]);
             super.setup(map);
             var chain = [];
             chain[locationid] = periodid;