Prefix & Suffix

When rendering the labels (on handle, and pips) both for screen and readers; the values can be prefixed or suffixed with a string to add context to the values.

Simple € Prefix

Here we will add a simple € prefix, this is a very common use-case, and demonstrates that the prefix is applied both to the handles and pips-labels, however you can see the actual output value is still just a number.

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

<RangeSlider prefix="€" float pips first="label" last="label" max={10000} step={100} bind:values />

Simple % Suffix

Just as with the prefix, we can supply a suffix prop which will be appended to the value in the UI. This is useful for adding a simple symbol to the end of values.

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

<RangeSlider suffix="%" float pips all="label" max={100} step={25} bind:values />

Fancy Pants

suffix and prefix can be combined for some interesting effects, here we will add a prefix of ”~” and a suffix of ” 🎈”, showing off how the values are still just numbers, but the UI is more interesting/meaningful.

<script>
  let values = [99];
  const prefix = "~";
  const suffix = " 🎈";
  $: final = prefix + values[0] + suffix; // reactive final value for use
</script>

<RangeSlider {prefix} {suffix} float pips last="label" range="min" max={99} step={9} bind:values />

<code title="The output slider values" data-values>
  {values} | {final}
</code>