diff --git a/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.html b/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.html
index 7f46e3322e..5dc191b52b 100644
--- a/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.html
+++ b/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.html
@@ -19,8 +19,8 @@
     </defs>
     <g [attr.transform]="styles.arcTranslateStr">
 
-      <g class="toClip" [attr.clip-path]="getUrlPath('#sliderClip')">
-        <g class="toFilter" [attr.filter]="getUrlPath('#blurFilter')">
+      <g class="toClip" [attr.clip-path]="getUrlFragment('#sliderClip')">
+        <g class="toFilter" [attr.filter]="getUrlFragment('#blurFilter')">
           <path [attr.d]="arc.d" [attr.fill]="off ? styles.nonSelectedArc.color : arc.color" *ngFor="let arc of styles.gradArcs"></path>
         </g>
         <!-- ngFor is a quirk fix for webkit rendering issues -->
diff --git a/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.ts b/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.ts
index a5853019ab..c3215a3196 100644
--- a/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.ts
+++ b/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.ts
@@ -129,11 +129,8 @@ export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
     this.invalidatePinPosition();
   }
 
-  getUrlPath(id: string) {
-    const baseHref = this.locationStrategy.getBaseHref().replace(/\/$/, '');
-    const path = this.location.path().replace(/\/$/, '');
-
-    return `url(${baseHref}${path}${id}${this.svgControlId})`;
+  getUrlFragment(id: string) {
+    return `url(${id}${this.svgControlId})`;
   }
 
   private invalidate(): void {