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.

<RangeSlider pips float last="label" />
    <!-- default max (100), will set pipstep to 5 (100/20) -->
<RangeSlider pips float last="label" max={10} />
    <!-- max = 10, will set pipstep to 1 -->
<RangeSlider pips float last="label" max={50} />
    <!-- max = 50, will set pipstep to 1 -->
<RangeSlider pips float last="label" max={200} />
    <!-- max = 200, will set pipstep to 10 (200/20) -->
<RangeSlider pips float last="label" max={20000} />
    <!-- max = 20000, will set pipstep to 1000 (20000/20) -->
Pipstep as a default
50
100
5
10
25
50
100
200
10000
20000

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

pipstep default with a small step value

When the step value is a small decimal, the pipstep will be default set in a way that will prevent more than 1000 pips from being rendered. The number of pips you see will vary depending on the max and step values.

<RangeSlider max={10} step={1} precision={3} pips float last="label" />
<RangeSlider max={10} step={0.1} precision={3} pips float last="label" />
<RangeSlider max={10} step={0.01} precision={3} pips float last="label" />
<RangeSlider max={10} step={0.001} precision={3} pips float last="label" />
Pipstep with small steps
5
10
5
10
5
10
5
10

As you can see, although this is working to prevent too many pips from being rendered, it is not a good experience for the user to see such a large number of pips, anyway.

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 practically impossible) to show a pip for every value. So we use pipstep to limit the amount of pips that are shown while still allowing values in-between to be selected.

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
0 10000 20000 30000 40000 50000
0 1000000 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(), or targeting the [data-val] attribute. See pip styling for 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() here