⚑️ Black Friday ends in 1 day - 50% off CodyHouse Pro Lifetime →


Progress value is 30%

Multi-Value Slider

Slider element for choosing a minimum and maximum value in a specified range.

View Demo


All components are based on CodyFrame.

If you're using this component, you should also include the SCSS/JS of the following components:

This component includes variations. Variations share the same SCSS/JS code but differ in their HTML.

How To

The Multi-Value Slider component is used to select and display a minimun and a maximum value in a specified interval.

It uses the native <input type="range"> element (one for the min-value and the other for the max-value).

To modify the range of possible values, use the min and max attribute of the input range element. Use the step attribute to modify the slider step.

⚠️Note: make sure to use the same value for the min/max/step attributes of both input range elements.

If you need a slider with a single value selection, please use the Slider Component.

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.