Go to homepage

Projects /


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

View Demo


All components are compatible with CodyFrame, Tailwind CSS or any other CSS framework.

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


Bug Report & Feedback

Component Github page ↗

Level up your CSS skills

Each month we email a 1-minute CSS tutorial to 20K developers

Awesome! We just sent you a confirmation link by email

Error - please try again or contact us

Your email address is already subscribed

Project duplicated

Project created

Globals imported

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