CodyHouse Framework + Components are featured on Product Hunt! Join the discussion →


Progress value is 30%

Multi-Value Slider

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

Copy: View demo


All components are built upon the CodyHouse Framework.

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

This component includes variations. All variations share the same SCSS/JS code. They only differ in the HTML part.

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.


  • βœ… Component created
    πŸ—“ August 12, 2019

Bug Report & Feedback

Get in touch: suggest a component or report a bug.

βœ… Project duplicated

βœ… Project created

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