🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

Slider

Slider element for choosing numbers between a min and a max value.

Copy: View demo

Dependencies

All components are based on CodyFrame.

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

How To

The Slider component can be used to select and display a value in a specified interval. It uses the native <input type="range"> element.

To change the range of possible values, you can modify the min and the max attributes of the range input element; you can also define a step using the step attribute.

If you need a slider with multi-value selection (minimum and maximum value), please use the Multi-Value Slider component.

If you need to reset the appearance of the slider element after the native <input type="range"> has been updated by an external control (e.g., a form reset), use the slider-updated custom event to trigger the update:

var customSlider = document.getElementsByClassName('js-slider')[0];
var customEvent = new CustomEvent('slider-updated');
// update the slider appearance to match the <input> element
customSlider[0].dispatchEvent(customEvent); 

✅ Project duplicated

✅ Project created

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