Range Component: Scale Markers, Initial Values, Custom Layouts, Events and Methods
Category: ExamplesThe range component supports both single and dual thumb sliders with freeze functionality and scale markers, serving as an enhanced replacement for native HTML range inputs.
Using Scale Markers
To display scale markers, set ruler:true or ruler.enable:true.
Custom Scale Markers
The ruler parameter is an object with the following properties:
In this module, minor ticks are mainly used to fill the scale nodes for better visual appearance, so they usually don't need special configuration. However, you can set them via ruler.minorEqual if needed.
Resetting Limits
Parameters min and max set the start/end limits (default: 0 and 100), can be any number.
Output Results
The result parameter outputs results. Set result:true or result.enable:true to display slider output values.
Vertical Orientation
Sliders are horizontal by default. Set flow parameter to v for vertical sliding (like water gauge or thermometer).
Keyboard Navigation
Set keyboard:true for keyboard input (using arrow keys instead of mouse clicks).
Various Use Cases
Combine min, max and step parameters to simulate real-world scenarios.
Current Value
You can get the component's name, value and disabled properties just like with native HTML elements.
Setting Attribute Values
To set values, use the setAttribute method to update the value property. Other properties can be set the same way.
Updating Components
Setting name, value, disabled or size attributes won't reinitialize the component, but setting any other attributes will reinitialize it (recreating the wrap node content).
Operation Methods
The component provides built-in reset(), clear() and set(data) methods, along with corresponding event listeners.
Data Caching
To maintain data state, set the stor-name attribute (must be unique among similar components in browser storage).
Event Listeners
Supports using addEventListener to subscribe to input, change, focus and blur events. You can also use the on+event format.
Since passing parameters with addEventListener can be cumbersome, we provide an additional set of event listeners:
