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
, which can
be moved around using relative CSS positioning.
Each individual pip is rendered as <span>
inside of the container, with the class .rsPip
and a unique [data-val]
and [data-index]
attribute. Therefore styling
the pips is super easy no matter what you are trying to do!
Circles
Getting a bit fancy, here. We use the .rsSelected+*
sibling selector in CSS to
style the n+1
, n+2
and n+3
pips as smaller circles, and then using the
:has(+ .rsSelected)
method to do the same for previous siblings at n-1
, n-2
and n-3
of the .rsSelected
pip!
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;