Labels over Pips

Each pip has an intrinsic value based on the min and max and its position in the Slider. This value can be displayed as a label over the pip.

The labels are displayed using the all, first last and rest props.

Labels over All

<RangeSlider pips all="label" />

Labels over First & Last

<RangeSlider pips first="label" last="label" />

No Pips over Rest

<RangeSlider pips all="label" rest={false} />

Labels over Rest

<RangeSlider pips rest="label" />

Only nth Labels

There could be scenarios where you need to show all the pips (step=1) but you only want to display labels for odd steps, for example.

There’s two ways to achieve this,

• either with css styling,
• or with the formatter function.

With CSS

This is the preferred method, as it’s more flexible and easier to maintain. The value remains in the markup, but it’s not visible.

<RangeSlider id="odd-only" pips all="label" max={20} />

#odd-only .rsPip:nth-child(odd) .rsPipVal {
  display: none;
}

With Formatter

Using a formatter will remove the value altogether from the markup.

<RangeSlider pips all="label" max={20} 
  formatter={(v) => {
    return v % 2 === 0 ? v : ' ';
  }} 
/>
  

Custom / Formatted Labels

Generally, if you want to display a custom label, you’ll want to use the formatter function, this allows you to display any string for the labels. Check out the formatter examples for more info.

<RangeSlider pips all="label" max={11} 
  formatter={(v) => {
    return new Date(2025, v).toLocaleString("en", { month: "short" });
  }}
/>