Examples
Use the links below to see examples of different options (props) available for the RangeSlider, or some examples that are useful to know about.
-
Values & Binding
Learn how to set and react to value changes with bindings
-
Min & Max
Set the minimum and maximum values of the slider (start/end)
-
Pips
Learn how to configure pips and control the display of pips/labels. Including only showing specific pips/labels.
-
Pip Labels
Basic examples of how to display labels over the pips
-
Steps
See how we can limit the number of values that can be selected
-
Pip Steps
Similar to steps, but learn how to limit the number of visible pips/labels
-
Steps & Pip Steps
Take a look at how to combine steps and pip steps to fully customize the slider
-
Ranges
Ranges allow selecting a set of values, see how to configure it here
-
Pushy
Ranges can be configured to push other handles along when they collide
-
Float
Learn how to show a floating label above the handle to help the user see the current value
-
Vertical
Learn how to make the slider vertical
-
Reversed
Learn how to reverse the orientation of the slider
-
Prefix & Suffix
See how to add a prefix or suffix to the displayed handle and pip values
-
Formatter
Go deeper than prefix/suffix and see how to perform custom formatting of the values
-
Disabled
Disabling the slider will prevent user interaction, but still allow programmatic access to the values
-
Easing
Learn how to use the spring physics for animating the slider