Slider element for choosing numbers between a min and a max value.
All components are based on CodyFrame.
This component includes variations. Variations share the same SCSS/JS code but differ in their HTML.
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
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');
var customEvent = new CustomEvent('slider-updated');
// update the slider appearance to match the <input> element