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" style="--height-range:0px;">
<input type="range" class="range" min="0" max="100" style="--height-range:2px;">
<input type="range" class="range" min="0" max="100" step="20" style="--height-range:6px;">
        

Disabled State

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

            

                
            
            

                
                
HTML
                
            
            <input type="range" class="range" disabled style="--height-range: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-thumb-custom-classes:".bg-primary-color, .bw-0";

JavaScript Implementation #

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

            

                
                
JavaScript
                
            
            // No JavaScript required for the Range component.