add @html for formatters to be styled

resolves #128

Author: simeydotme

src/RangePips.svelte

@@ -21,7 +21,7 @@
   // formatting props
   export let prefix = "";
   export let suffix = "";
-  export let formatter = (v,i) => v;
+  export let formatter = (v,i,p) => v;
 
   // stylistic props
   export let focus = undefined;
@@ -210,7 +210,7 @@
     >
       {#if all === 'label' || first === 'label'}
         <span class="pipVal">
-          {#if prefix}<span class="pipVal-prefix">{prefix}</span>{/if}{formatter(fixFloat(min),0,0)}{#if suffix}<span class="pipVal-suffix">{suffix}</span>{/if}
+          {#if prefix}<span class="pipVal-prefix">{prefix}</span>{/if}{@html formatter(fixFloat(min),0,0)}{#if suffix}<span class="pipVal-suffix">{suffix}</span>{/if}
         </span>
       {/if}
     </span>
@@ -229,7 +229,7 @@
         >
           {#if all === 'label' || rest === 'label'}
             <span class="pipVal">
-              {#if prefix}<span class="pipVal-prefix">{prefix}</span>{/if}{formatter(pipVal(i),i,percentOf(pipVal(i)))}{#if suffix}<span class="pipVal-suffix">{suffix}</span>{/if}
+              {#if prefix}<span class="pipVal-prefix">{prefix}</span>{/if}{@html formatter(pipVal(i),i,percentOf(pipVal(i)))}{#if suffix}<span class="pipVal-suffix">{suffix}</span>{/if}
             </span>
           {/if}
         </span>
@@ -248,7 +248,7 @@
     >
       {#if all === 'label' || last === 'label'}
         <span class="pipVal">
-          {#if prefix}<span class="pipVal-prefix">{prefix}</span>{/if}{formatter(fixFloat(max),pipCount,100)}{#if suffix}<span class="pipVal-suffix">{suffix}</span>{/if}
+          {#if prefix}<span class="pipVal-prefix">{prefix}</span>{/if}{@html formatter(fixFloat(max),pipCount,100)}{#if suffix}<span class="pipVal-suffix">{suffix}</span>{/if}
         </span>
       {/if}
     </span>

src/RangeSlider.svelte

@@ -387,6 +387,17 @@
     }
   }
 
+  /**
+   * helper to take a string of html and return only the text
+   * @param {string} possibleHtml the string that may contain html
+   * @return {string} the text from the input
+   */
+  function pureText(possibleHtml) {
+    const div = document.createElement("div");
+    div.innerHTML = possibleHtml;
+    return div.textContent || div.innerText || "";
+  }
+
   /**
    * when the user has unfocussed (blurred) from the
    * slider, deactivate all handles
@@ -832,7 +843,7 @@
       aria-valuemin={range === true && index === 1 ? values[0] : min}
       aria-valuemax={range === true && index === 0 ? values[1] : max}
       aria-valuenow={value}
-      aria-valuetext="{prefix}{handleFormatter(value,index,percentOf(value))}{suffix}"
+      aria-valuetext="{prefix}{pureText(handleFormatter(value,index,percentOf(value)))}{suffix}"
       aria-orientation={vertical ? 'vertical' : 'horizontal'}
       aria-disabled={disabled}
       {disabled}
@@ -841,7 +852,7 @@
       <span class="rangeNub" />
       {#if float}
         <span class="rangeFloat">
-          {#if prefix}<span class="rangeFloat-prefix">{prefix}</span>{/if}{handleFormatter(value,index,percentOf(value))}{#if suffix}<span class="rangeFloat-suffix">{suffix}</span>{/if}
+          {#if prefix}<span class="rangeFloat-prefix">{prefix}</span>{/if}{@html handleFormatter(value,index,percentOf(value))}{#if suffix}<span class="rangeFloat-suffix">{suffix}</span>{/if}
         </span>
       {/if}
     </span>