Formatter

So although we used prefix and suffix to add some formatting before and after the values, we can also use the formatter function to format the values in any way we like.

The formatter function is passed the value, index and percent of the pip/handle to allow us to modify the display.

<RangeSlider formatter={(value, index, percent) => { return value }} />

Pips and Floats

There are two properties that deal with formatting; formatter and handleFormatter. These are for the pips and handles respectively. If the handleFormatter is not set, then the formatter will be used for both.

Single Formatter

Like in the prefix example, where we added a simple € prefix. This time we will also style as a currency, but we will format the whole number into a currency string using the Intl.NumberFormat API.

<script>
  let values = [1000];
  const currency = new Intl.NumberFormat( "de", { style: 'currency', currency: 'EUR' });
  const formatter = (value) => currency.format(value);
</script>

<RangeSlider {formatter} float pips all="label" max={10000} step={0.1} pipstep={50000} bind:values />

Multiple Formatters

Here we will use the same formatter example as above for displaying the handleFormatter, but we will use a different formatter for the pip labels to demonstrate how you can use different formatters for each.

<script>
  let values = [1000];
  const currency = new Intl.NumberFormat( "jp", { style: 'currency', currency: 'JPY' });
  const short = new Intl.NumberFormat( "jp", { style: 'currency', currency: "JPY", notation: "compact" });
  const handleFormatter = (value) => currency.format(value);
  const formatter = (value) => short.format(value);
  const max = 10000000;
</script>

<RangeSlider {formatter} {handleFormatter} {max} pipstep={max/2} step={1} float pips all="label" bind:values />

Fun Formatters

A cute example where we don’t even care about numbers, a sort-of Net Promoter Score.

<script>
  let values = [0];
  const scores = Array.from({length: 5}, () =>  "⭐" );
</script>

<span class="floating-head">
  {scores[values[0]].repeat(values[0]+1)}
</span>

<RangeSlider formatter={ v => scores[v] } max={ scores.length - 1 } range="min"
  pips all="label" bind:values />

.floating-head { 
  position: absolute; 
  top: 0; 
  right: 1.5em; 
  font-size: 1.625em; 
}
.rangePips .pip .pipVal { 
  font-size: 1.25em; 
  opacity: 0.5; 
  filter: saturate(0); 
  top: -0.25em;
}
.rangePips .pip.selected .pipVal,
.rangePips .pip.in-range .pipVal { 
  font-size: 2em; 
  opacity: 1; 
  filter: saturate(1); 
  top: -0.25em;
}

Giga

Here’s a pretty intense example, where we use the formatter to convert the values into Gigabytes, Terabytes, Petabytes, etc. There’s a pretty hefty algorithm to scale the values logarithmically, and then a special function for styling the numbers as Giga, Tera, Peta, etc.

<script>

  let values = [1];

  // format the value to a human readable string
  const formatter = (value) => {
    const gigabyte = 1000000000;
    return prettyBytes( toGigabytes(value) * gigabyte );
    // https://github.com/sindresorhus/pretty-bytes
  }

  // take the input value from the range, and then
  // power it so it outputs in a logarithmic scale
  const toGigabytes = (value) => {
    if (value <= 10) return value;
    const MOD = (val, div) => val % div;
    const POW = (base, exp) => Math.pow(base, exp);
    const CEIL = (val) => Math.ceil(val);
    const MAX = (val, val2) => Math.max(val, val2);
    const MODULO = MAX( 1, value - 1 - MOD(value - 11, 9 ));
    const POWER = POW( 10, CEIL( MODULO / 10 ));
    return ( value - MODULO ) * POWER + POWER;
  }

</script>

<RangeSlider {formatter} float pips all="label" min={1} max={55} pipstep={9} range="min" bind:values />

Squares

One last example of handle and pip formatters working to compliment each other. This time we will use the handleFormatter to show the real value, and the formatter to show the square of the value.

<script>
  let values = [7];
</script>

<RangeSlider formatter={v => v + "²"} handleFormatter={v => v * v} 
  float pips all="label" max={15} bind:values />