Pip Steps

It is not always desirable to show every selectable value as a pip on the Slider, and so this option works much in the same way as step, but it only affects the rendering of the pips and not which values can be selected.

pipstep default

Here’s some examples of the default pipstep in action.

<script>
  let v1 = [50];
  let v2 = [5];
  let v3 = [25];
</script>

<RangeSlider pips bind:values={v1} />
<RangeSlider pips max={10} bind:values={v2} />
<RangeSlider pips max={50} bind:values={v3} />
Pipstep as a default
50 | 5 | 25

Note how the first Slider in this example has pips every 5 values, but the values in-between are still selectable.

Explicity set

In this example we have explicitly set the pipstep to be 3, so a pip will be displayed every 3 values.

Notice how the ending of the Sliders have the pips kind of bunched up, this is because the pipstep is set to 3 but the max props are not multiples of 3.

<script>
  let v1 = [33];
  let v2 = [6];
  let v3 = [21];
</script>

<RangeSlider pips pipstep={3} bind:values={v1} />
<RangeSlider pips pipstep={3} max={10} bind:values={v2} />
<RangeSlider pips pipstep={3} max={50} bind:values={v3} />
Setting the pipstep manually
33 | 6 | 21

Extreme values & Labels

Here we’re demonstrating some very extreme max values that a Slider may encounter. At this extreme it would be unwise and impossible to show a pip for every value. So we use pipstep to limit the amount of pips shown.

You could imagine this setup for something like a Home selling website to restrict the price range the user is looking to buy in.

<script>
  let v1 = [10000];
  let extreme = 2000000; // two million
  let v2 = { max: extreme, step: extreme/2, values: [0, extreme/2] }
</script>

<RangeSlider pips pipstep={10000} max={50000} all="label" bind:values={v1} />
<RangeSlider pips pipstep={v2.step} max={v2.max} all="label" range bind:values={v2.values} />
Labels on Extreme Ranges
010000 20000 30000 40000 50000
01000000 2000000
10000 | 0,1000000

Special Styling

So far we’ve seen the use of pipstep to limit how many pips are rendered to the slider. But sometimes we don’t want to only choose to show/hide, but also how to style them differently based on the pip position on the Slider.

Unique styling can be achieved with css, and the css selector nth-child(). See here for some examples

Special Formatting

As evident with the “extreme” Slider above, having large numbers such as “1000000” rendered on the Slider is fairly unreadable. And sometimes we don’t even want to show numbers at all. We might want to display a currency symbol, or a percentage, or just strings of text.

Special formatting of labels can be done using the formatter() property. Read more about formatter()