Range

The Range component provides a customizable slider input for selecting numeric values within a range. It supports different styles, colors, and states, making it suitable for forms, filters, and interactive UIs.

Description #

The Range component is a styled <input type=\"range\"> element. It allows users to select a value from a range by sliding a handle. The component supports custom heights, colors, and disabled and step states.

• Default: Standard range slider with customizable height and color.

• Disabled: Shows a disabled state for non-interactive sliders.

• Step: Allows discrete steps between values.

Examples and Classes #

Default Range

A basic range slider with the .range class and primary background color.

            

                
            
            

                
                
HTML
                
            
            <input type="range" class="range bg-on-primary-color">
        

Custom Height

You can change the height of the slider using the --height-range CSS variable.

            

                
                
                
            
            

                
                
HTML
                
            
            <input type="range" class="range" data-range-height="0px">1
<input type="range" class="range" min="0" max="100" data-range-height="2px">1
<input type="range" class="range" min="0" max="100" step="20" data-range-height="6px">1

Disabled State

Add the disabled attribute to make the slider non-interactive.

            

                
            
            

                
                
HTML
                
            
            <input type="range" class="range" disabled data-range-height="6px">
        

Available Classes

Class	Description
.range	Main class for the range slider. Applies custom styles and variables.

Layout Variations

The range component supports different layout variations:

• Custom Height: Adjust the slider height using the --height-range CSS variable.
  For example: style="--height-range:6px;" or style="--height-range:1.5rem;". The value must always include a unit (such as px, rem, em, etc). Using a number without a unit will not work in CSS.
• Disabled State: Add the disabled attribute for a non-interactive slider.
• Step: Use the step attribute for discrete values.

File Locations #

File	Path	Description
index.html	miz/themes/mizoon/components/range/index.html	Example implementation and documentation
_index.scss	miz/themes/mizoon/components/range/_index.scss	SCSS styles and variables
script.js	miz/themes/mizoon/components/range/script.js	JavaScript functionality (currently not required)

SCSS Variables #

            

                
                
SCSS
                
            
            $range-custom-classes:".bg-on-secondary-color, .radius-all-full, .cursor-pointer";
$range-disabled-custom-classes:".bg-disabled-regular-color";
$range-thumb-custom-classes:".radius-all-full, .bg-secondary-color, .bw-0";
$range-thumb-width: 15px;
$range-thumb-height: 15px;

JavaScript Implementation #

Currently, there is no specific JavaScript functionality required for the range component. All behaviors are handled via HTML and CSS.

            

                
                
JavaScript
                
            
            class Range {
    constructor() {
        this.init();
    }

    init() {
        document.querySelectorAll('.range').forEach(range => {
            const rangeHeight = range.dataset.rangeHeight;
            if (rangeHeight) {
                range.style.setProperty('--range-height', rangeHeight);
            }
        });
    }
}

new Range();