The Future of Range Inputs

A Lit web component implementation of the proposed <rangegroup> element. Read the rangegroup explainer

(Toggle to see native <input type="range"> fallback)

A common use case for selecting a minimum and maximum value. The segment between the handles is styled differently.

Dual-Handle Base Example
Show code

Demonstrates two-way data binding. Drag the handles to update the input fields, or type in the fields to move the handles.

Interactive Price Range
Show code

You could use stepbetween to prevent thumbs form colliding.

Dual-Handle with 10 stepbetween
Show code

An opening hours selector with four handles to define morning and afternoon shifts. The segments between handles are styled to show open/closed times, with a datalist showing hourly labels and enabling half-hour steps.

Opening Hours Selector
Show code

Demonstrates multiple handles and custom-colored segments for different temperature zones.

Multi-Handle Temperature Control
Show code

Demonstrates using invisible handles with the CSS Anchoring API to position custom tooltips. The tooltips appear to be the draggable handles, and their values are updated via JavaScript.

Floating Tooltip Handles
Show code

Shows integration with a <datalist> for tick marks and labels, and enforces a minimum distance of 25 between handles via stepbetween="25".

Datalist Integration & Step Between
Show code

Each thumb can have its own `min` and `max` attributes, creating individual constraints. The thumb's movement will be restricted to the tighter of its own bounds and the overall component's bounds.

Thumb Constraints
Show code

If a thumb's `min` or `max` exceeds the range of the component, it will be constrained by the component's bounds. Here, the track is 100-200, but the thumbs try to go from 0-300.

Parent Override Constraints
Show code

A complex example with three handles. The middle handle is constrained to a small central zone (30-70), while the outer handles have full range and can push the middle one.

Multi-Handle Constraints
Show code

The disabled attribute on <rangegroup> disables the entire control. All thumbs become non-interactive and are removed from the tab order.

Fully Disabled Group
Show code

Individual thumbs can be disabled while the rest remain interactive. The minimum handle below is locked at its value. The button toggles the group-level disabled state to demonstrate state persistence: re-enabling the group preserves individual disabled states.

Individual Thumb Disabled 
Group disabled: false
Show code

A complete visual transformation to create a budget allocation tool. The component's segments are styled as colored bars, and the thumbs as draggable separators. All labels and percentages are updated via JavaScript as well as an aria-polite to give feedback to the user about the current value of the slider..

Budget Allocator
Show code

Recreating a classic slider look. This demonstrates using the CSS Anchoring API for tooltips with heavy custom styling on all component parts.

Classic Look with anchored Tooltips
Show code

Use the component's public methods and properties to get and set values programmatically.

JavaScript API Interaction 

                        

                        

                            Show code
                            
                            
                            
                        

                    

                    

                        

                            This example shows how to style individual tick marks and their labels using CSS Parts. The
                            '50%' tick is highlighted with a different color and height.
                        

                        

                            
                            
                                Custom Tick Styling
                                
                                
                            
                            
                                
                                
                                
                                
                                
                            
                        

                        

                            Show code
                            
                            
                        

                    

                    

                        

                            A more creative example styling ticks to look like milestones on a project timeline. Key
                            milestones are larger and have distinct colors.
                        

                        

                            
                            
                                Styled Timeline
                                
                                
                            
                            
                                
                                
                                
                                
                                
                            
                        

                        

                            Show code
                            
                            
                        

                    

                    

                        

                            This example uses three handles and styled ticks to represent different phases in a process,
                            with each major tick mark having a unique color.
                        

                        

                            
                            
                                Three-Handle Process Flow
                                
                                
                                
                            
                            
                                
                                
                                
                                
                            
                        

                        

                            Show code