Styling the Pips
Because the pips are all rendered, it’s possible to style them in unique ways to truly make the RangeSlider your own.
Pips
The pips are rendered in a container <div>
with the class .rangePips
.
Each individual pip is rendered as <span>
with the class .pip
and a unique [data-val]
attribute.
Circles
Here’s an example of a pip that is rendered as a circle. We are setting every
pip to be visible by passing pipstep={1}
to the component. And after we have
rendered every pip as a small dot, we make every 5th pip a bigger dot.
Futuristic Pips
Normally the step
and pipstep
only allow a regular interval of
pips to be shown/hidden based on the multipliers set (step
and pipstep
).
But here we are demonstrating the complete control of individual pips and labels
by modifying the pipstep
and then targeting specific pips with CSS by
utilizing the [data-val]
attribute.
Check out the CSS tab in the code block to see how we achieve this.
Extreme control with JS
The previous example demonstrated how to only show a subset of pips by using CSS. But what if we wanted the display values to be dynamic?
In this case, we could use Javascript to dynamically set the CSS values;