Range slider lets the user select a range of values by moving the slider thumb. The smallest value is to the left, the largest to the right. We have used noUISlider plugin as base & customized it by applying material design principles to it.

For more options and documentation, visit : noUISlider

Install with NPM Single Handle Horizontal Slider Horizontal Range Slider Vertical Slider Vertical Range Slider Configuration Options

Install with NPM

You can install and manage Propeller Range Slider using npm:



                      

                
 
           

           	
        
        

            
            
            

                

                    
 Single Handle Horizontal Slider

                

                
A handle snaps to a clicked location. It can immediatly be moved, without a mouseup + mousedown. There are many different types of single handler slider such as default slider, slider with steps, slider with visible tooltip, slider with bottom visible tooltip, slider which can be disabled and slider with input value. 

            

            
            

                
                
                

                
                    
                    

                        code 
                    

                    
                    
                    

                        

                            
 
                            
                        

                        

                            

                                
 
                            

                            

                                

                            

                            

                                

                            

                        

                    

                    
                    
                    
                    

                        

                            

                                

                                    

                                

                            

                        

                    

                    
Single Handle slider : It allows user to select a value along a subjective range. It does not require a specific value to make adjustments, although it may, in some instances, offer an editable numeric value.

                        
                


                
                

                
                    
                    

                        code 
                    

                    
                    
                    

                        

                        
 
                            
                        

                        

                            

                                
 
                            

                            

                                

                            

                            

                                

                            

                        

                    

                    
                                        
                    

                        

                            

                                

                                    

                                

                            

                        

                    

                    
Single Handle Slider with steps

                    
                

                
                
                

                
                    
                    

                        code 
                    

                    
                    
                    

                        

                            
 
                            
                        

                        

                            

                                
 
                            

                            

                                

                            

                            

                                

                            

                        

                    

                    
                                        
                    

                        


                            
                            

                                

                                    
                                    

                                

                            

                            
                        

                    

                    
Single Handle slider with visible tooltip : Add .pmd-range-tooltip to make the slider tooltip visible by default.

                
 

                   
                

                
                    
                    

                        code 
                    

                    
                    
                    

                        

                            
 
                            
                        

                        

                            

                                
 
                            

                            

                                

                            

                            

                                

                            

                        

                    

                    
                                        
                    

                        

                            

                                

                                    

                                    

                                

                            

                        

                    

                    
Single Handle slider with visible tooltip (bottom direction) : Add .pmd-range-tooltip-bottom to make the slider tooltip visible in bottom direction by 
                    default.

                    
                
 

                
                

                
                    
                    

                        code 
                    

                    
                    
                    

                        

                            
 
                            
                        

                        

                            

                                
 
                            

                            

                                

                            

                            

                                

                            

                        

                    

                    
                                        
                    

                        

                            

                                

                                    

                                    

                                        
                                    

                                

                            

                        

                    

                    
Single Handle Slider which can be disabled. 

                        
                
 
                
                   
                

                
                    
                    

                        code 
                    

                    
                    
                    

                        

                            
 
                            
                        

                        

                            

                                
 
                            

                            

                                

                            

                            

                                

                            

                        

                    

                    
                                        
                    

                        

                            

                                

                                    

                                    

                                        

                                            

                                                

                                                    
                                                    
                                                

                                            

                                        

                                    

                                    

                                

                            

                        

                    

                    
Single Handle Slider which can be controlled by inputting values also.

                        
                
 
                   
            

       	

            
           
        
        

        
        	
            

                

                    
Range Slider

                    
Range slider are the ones with two handler. We can have range sliders of various types such as default range slider, range slider with visible tooltip, range slider whose both handlers can be disabled and range slider with input value.

                

            

            
            

                
                
                

                
                	
                    

                        code 
                    

                    
                    
                    

   						

       						
 
                            
                        

                        

                            

                                
 
                            

                            

                                

                            

                            

                                

                            

                        

                    

                    
                                        
                    

                        

                            
                            

                                

                                    
                                    
                                    

                                

                            

                            
                            
                        

                    

                    
Default range slider. Use .pmd-range-slider to create the slider.

                        
                

                
                
                
                

                
                	
                    

                        code 
                    

                    
                    
                    

   						

       						
 
                            
                        

                        

                            

                                
 
                            

                            

                                

                            

                            

                                

                            

                        

                    

                    
                                        
                    

                        

                            

                                

                                    

                                

                            

                        

                    

                    
Range slider with visible tooltip. In order to make the tooltip visible, add .pmd-range-tooltip to the slider.

                    
                

                
                
                
                

                
                	
                    

                        code 
                    

                    
                    
                    
 
                        
                        

                            

                                
 
                            

                            

                                

                            

                            

                                

                            

                        

                    

                    
                                        
                    

                        

                            

                                

                                    

                                

                            

                        

                    

                    
Range slider with visible tooltip at the bottom. You can show tooltip at the bottom using .pmd-range-tooltip-bottom.

                    
                

                
                
                
                

                
                	
                    

                        code 
                    

                    
                    
                    
 
                        
                        

                            

                                
 
                            

                            

                                

                            

                            

                                

                            

                        

                    

                    
                                        
                    

                        

                            

                                

                                    

                                

                            

                        

                    

                    
Range slider with lower tooltip at the bottom. You can show tooltip at the bottom using .pmd-range-tooltip-left-bottom.

                        
                

                
                
                

                	
                    
                    

                        code 
                    

                    
                    
                    
 
                        
                        

                            

                                
 
                            

                            

                                

                            

                            

                                

                            

                        

                    

                    
                                        
                    

                        

                            

                                

                                    

                                

                            

                        

                    

                    
Range slider with upper tooltip at the bottom. You can show tooltip at the bottom using .pmd-range-tooltip-right-bottom.

                        
                

                
                                                                            
                
                

                
                	
                    

                        code 
                    

                    
                    
                    

                       

                           
 
                            
                        

                        

                            

                                
 
                            

                            

                                

                            

                            

                                

                            

                        

                    

                    
                                        
                    

                        

                            

                                

                                    

                                    

                                        
                                        
                                    

                                

                            

                        

                    

                    
Ranger slider each of which's handler can be disabled. 

                    
                

                
                
                

                
                	
                    

                        code 
                    

                    
                    
                    

   						

       						
 
                            
                        

                        

                            

                                
 
                            

                            

                                

                            

                            

                                

                            

                        

                    

                    
                                        
                    

                        

                            

                                

                                    

                                    

                                        

                                            
                                        

                                        

                                            
                                        

                                    
	
                                    

                                

                            

                        

                    

                    
Range Slider with value

                    
                

               
            

        

            
            
            
        
        

        
        	
            

                

                    
Verticle Slider

                

                
 Instead of horizontal slider we can also show the slider vertically.  For vertical sliders also we can have slider with steps, slider with tooltip towards left or right. 

            

            
            	
            

            
                                
                

                
                	
                    

                        code
                    

                    
                    
                    

   						

       						
 
                            
                        

                        

                            

                                
 
                            

                            

                                

                            

                            

                                
 
                            

                        

                    

                    

                    
                    
                    

                    
                        
                        
                            
                            

                                

                            

                            
Single Handle Vertical Slider.

                        

                        
                        
                        
                        	
                            

                                

                            

                            
Single Handle Vertical Slider with steps

                        

                        
                        
                        
                            
                            

                                

                            

                            
Single Handle Vertical Slider with visible tooltip. Use .pmd-range-tooltip for slider with visible tooltip.

                        

                        
                        
                        
                            
                            

                                

                            

                            
Single Handle Vertical Slider with visible tooltip at right. Add right tooltip using .pmd-range-tooltip-right

                        

                        

                        
                    

                    
                


            

        

         

        
        

        
        	
            

                

                    
Verticle Range Slider

                    
 Vertical range slider is a slider with two handlers. We can have default slider or slider with visible tooltip. We can also have a slider with both tooltips in opposite direction to each other.

                

            

            
            


                
                

                
                	
                    

                        code
                    

                    
                    
                    

   						

       						
 
                            
                        

                        

                            

                                
 
                            

                            

                                

                            

                            

                                
 
                            

                        

                    

                    

                    
                    
                    

                    
                    	
                        
                            
                            

                                

                            

                            
Default Vertical Range Slider

                        

                        
                        
                        
                            
                            

                                

                            

                            
Vertical range slider with visible tooltip on left

                        

                        
                        
                        
                            
                            

                                

                            

                            
Vertical range slider with lower handler tooltip towards right and upper handler tooltip towards left. Use .pmd-range-tooltip-bottom-right to achieve this. 

                        

                        
                        
                        
                            
                            

                                

                            

                            
Vertical range slider with lower handler tooltip towards left and upper handler tooltip towards right. Use .pmd-range-tooltip-top-right for this.

                        

                        
                    


                


            

        
 
        
            
                    
        

        
        	
            

                

                    
Configuration Options

                

                
The Propeller CSS classes apply various predefined visual enhancements to the slider. The table lists the available classes and their effects.

            

            
            

            
                
                

					
 
                        

                            
                                

                                    Propeller Class
                                    Effect
                                    Remark
                                

                            
                            
                                

                                    .pmd-range-slider
                                    Used to create the slider.
                                    Required
                                

                                

                                    .pmd-range-tooltip
                                    Used to make the tooltip visible.
                                    Optional
                                

                                

                                    .pmd-range-tooltip-bottom
                                    Used to make the tooltip visible at the bottom.
                                    Optional
                                

                                

                                    .pmd-range-tooltip-right
                                    Use to make the tooltip visible at the right of the vertical slider.
                                    Optional
                                

                                

                                    .pmd-range-tooltip-bottom-right
                                    Use to make the lower tooltip visible at the right of the vertical slider.
                                    Optional
                                

                                

                                    .pmd-range-tooltip-top-right
                                    Use to make the upper tooltip visible at the right of the vertical slider.
                                    Optional
                                

                                

                                    .pmd-range-tooltip-left-bottom
                                    Use to make the lower tooltip visible at the bottom of the horizontal slider.
                                    Optional
                                

                                

                                    .pmd-range-tooltip-right-bottom
                                    Use to make the upper tooltip visible at the bottom of the horizontal slider.
                                    Optional