Precision

By default <RangeSlider /> will use a precision of 2 decimal places. This controls the values and the display of pips/floats.

It is necessary to control the precision due to the nature of floating point artihmetic in javascript. Without a precision check, values on the slider would end up with rounding errors in certain scenarios (specifically sliders with non-integer steps).

Default Precision

Here you can see the default precision of 2 decimal places.

<script>
  let value = 0.55;
</script>

<RangeSlider step={0.05} pipstep={2} max={1} pips all="label" float bind:value />

step has too much precision

It’s possible to have steps of more than 2 decimal places, but here you can see that even though the slider is set to a step of 0.005, the values are rounded to 2 decimal places by default.

The slider accepts the value prop as 0.555, but as soon as it is interacted with, it will be rounded to 0.56.

<script>
  let value = 0.555;
</script>

<RangeSlider step={0.005} pipstep={20} max={1} pips all="label" float bind:value />

Changing the precision

So when you have a step with more than 2 decimal places, you can set the precision to the number of decimal places you want to use.

<script>
  let value = 123.4567;
  const minuteFormat = new Intl.NumberFormat('en', { minimumIntegerDigits: 1 });
  const secondFormat = new Intl.NumberFormat('en', { minimumIntegerDigits: 2, minimumFractionDigits: 4, maximumFractionDigits: 4 });
  const timeFormat = (v) => `${minuteFormat.format(Math.floor(v / 60))}:${secondFormat.format(v % 60)}`;
</script>

<RangeSlider 
  bind:value 
  step={0.0001} 
  precision={4} 
  rangeGapMin={0.05}
  max={196} 
  float
  range='min'
  all="label"
  formatter={timeFormat}
/>